div中的垂直对齐中间按钮[重复]答案

【问题标题】：Vertical align middle button in div [duplicate]div中的垂直对齐中间按钮[重复]
【发布时间】：2018-01-02 04:44:06
【问题描述】：

我试图在模态页脚div 的中心垂直对齐此按钮。这是我的 JSFiddle 的链接：https://jsfiddle.net/kris_redden/34jyLpok/

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
}

.wrapper-div {
  vertical-align: middle
}

.button {
  background: #e8e8e8;
  display: inline-block;
  font-size: 12px position: relative;
}

<div class="modal-footer">
  <div class="wrapper-div">
    <button type="button" class="button"> Submit Filters </button>
  </div>
</div>

我不确定需要进行哪些更改才能使其在蓝色模态页脚 div 的中心垂直对齐。我知道可以通过在按钮上设置边距以一种骇人听闻的方式完成此操作，但这不是我想要做的。

【问题讨论】：

你可以看到这个答案link
否定显然是一种奖励。

标签： html css

【解决方案1】：

最简单的方法是将以下内容添加到 .modal-footer

display: flex;
align-items: center;

【讨论】：

对最大浏览器的支持怎么样。
使用自动前缀
我认为更好的解决方案是使用更少的代码。

【解决方案2】：

这也可以通过使用来实现

.button-container{
 position:relative;
 height:100%;
}

.button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

vertical-align:middle; 在这里不是必需的。如果按钮容器高度未知并且我不能使用 flex-box (dispaly:flex;) 代替，我会使用此方法。
https://jsfiddle.net/34jyLpok/7/

另一种选择是使用 flex-box (display:flex;)

.button-container{
     height:100%;
     display: flex;
     //flex-direction: column;//only vertical
     align-items: center;//both vertical and horizonal
     justify-content: center
    }

    .button{
      width:100px;
    }

display: flex 的问题是它在旧的 IE 浏览器版本中不完全支持。 https://jsfiddle.net/34jyLpok/9/

【讨论】：

【解决方案3】：

.modal-footer {
display: table;
width: 100%;
}

.wrapper-div {
display: table-cell;
  vertical-align: middle
}

去做这样的事情。这是fiddle。

【讨论】：

【解决方案4】：

你可以使用如下所示的flexbox

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

【讨论】：

【解决方案5】：

你可以把你的风格改成这样

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
  display:table;
  width: 100%;
}
.wrapper-div {
  display:table-cell; 
  vertical-align: middle;
}
.button {
  background: #e8e8e8;
  display: block;
  margin:auto;
  font-size: 12px
  position: relative;
}

您可以从.button 中删除margin:auto; 以仅垂直居中按钮

见fiddle

【讨论】：

【解决方案6】：

这是一种方法。

.wrapper-div {
  line-height: 60px; // ex: 60px, The button will center to line-height.
}

.wrapper-div button {
  // height of button must be less than its parent.
  height: 30px;
  display: inline-block;
  vertical-align: baseline;
}

<div class="wrapper-div">
  <button type="button" class="button"> Submit Filters </button>
</div>
<div class="wrapper-div">
  <button type="button" class="button"> Submit Filters </button>
</div>

【讨论】：

我不想以像素为单位给出高度