为什么垂直对齐：中层在我的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;