div中的垂直对齐中间按钮

Question

我正在尝试将此按钮垂直对齐模式页脚 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 的中心垂直对齐。我知道可以通过在按钮上设置边距来以一种骇人听闻的方式完成此操作，但这不是我想要做的。

原文由 SQL and Java Learner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

去做这样的事情。这是 小提琴。

原文由 Vishal Kumar Sahu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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/

另一种选择是使用弹性盒（ 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/

原文由 omer 发布，翻译遵循 CC BY-SA 3.0 许可协议