为什么垂直对齐：中层在我的span或div上不起作用？

Question

我正在尝试将一个span或div元素垂直居中放置在另一个div元素中。但是当我放进去时vertical-align: middle，什么也没发生。我尝试更改display两个元素的属性，但似乎没有任何效果。

这是我目前在网页中执行的操作：

.main {

  height: 72px;

  vertical-align: middle;

  border: 1px solid black;

  padding: 2px;

}

    

.inner {

  vertical-align: middle;

  border: 1px solid red;    

}

    

.second {

  border: 1px solid blue; 

}

<div class="main">

  <div class="inner">

    This box should be centered in the larger box

    <div class="second">Another box in here</div>

  </div>

</div>

这是实现的jsfiddle，显示它不起作用：http : //jsfiddle.net/gZXWC/

Answer 1

试试这个，对我很好：/* Internet Explorer 10 */display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-align:center;/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;/* Safari, Opera, and Chrome */display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;/* W3C */display:box;box-pack:center;box-align:center;