对齐：中间不工作
我试图将一个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>这似乎是最好的方式 - 从我原来的帖子开始已经过去了一段时间，现在应该做什么：http://jsfiddle.net/m3ykdyds/200
/* CSS file */
.main {
display: table;
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
/* HTML File */
<div class="main">
<div class="inner"> This </div>
</div>
您还可以使用以下内容：
使用CSS3：
<!-- HTML -->
<div class="wrapper">
<div>Hi</div>
</div>
/* CSS */
.wrapper {
display : flex;
align-items : center;
}
试试这个，对我很好：
/* 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;
使用CSS3：
<div class="outer">
<div class="inner"/>
</div>
CSS：
.outer {
display : flex;
align-items : center;
}
注意：这可能不适用于旧版IE
链接地址: http://www.djcxy.com/p/41549.html