我正在尝试将span或div元素垂直居中放置在另一个div元素中。然而，当我将垂直对齐：中间时，什么都不会发生。我尝试更改两个元素的显示属性，但似乎没有任何效果。
这是我目前在我的网页上做的：
.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/
使用CSS3：
<div class="outer">
<div class="inner"/>
</div>
CSS：
.outer {
display : flex;
align-items : center;
}
使用"felly-content： center；"水平对齐元素
注意：这可能不适用于旧IE
这似乎是最好的方法——从我最初的帖子到现在已经过去了一段时间，这就是现在应该做的：
.main {
display: table;
/* optional css start */
height: 90px;
width: 90px;
/* optional css end */
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}<div class="main">
<div class="inner"> This </div>
</div>
试试这个，对我很有效：
/* 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;
