我试图在另一个div元素中垂直居中一个span或div元素。然而，当我输入vertical-align: middle时，什么都没有发生。我试着改变这两个元素的显示属性，但似乎都不起作用。
这是我目前在我的网页上做的事情:
.main { 身高:72 px; vertical-align:中间; 边框:1px纯黑色; 填充:2 px; ｝ 在{ vertical-align:中间; 边框:1px纯红色; ｝ 接着{ 边框:1px纯蓝色; ｝ < div class = "主" > < div class = "内部" > 这个盒子应该放在大盒子的中间 <div class="second">这里还有一个盒子</div> < / div > < / div >
下面是实现的jsfiddle，显示它不起作用:http://jsfiddle.net/gZXWC/
当前回答
由于垂直对齐在td上可以正常工作，您可以在div中放置一个单格表来对齐它的内容。
<div>
<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
Aligned content here...
</td></tr></table>
</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;
这里有两种方法做垂直对齐的例子。我用过，效果很好。一个是使用绝对定位，另一个是使用flexbox。
垂直对齐示例
使用flexbox，你可以通过display: flex;使用align-self。如果你也需要水平对齐，你可以在容器中使用align-items和justify-content。
如果不想使用flexbox，可以使用position属性。如果容器是相对的，内容是绝对的，那么内容就可以在容器内自由移动。如果你用top: 0;左:0;在内容中，它将位于容器的左上角。
然后，对齐它，你只需要改变顶部和左侧的引用为50%。这将从内容的左上角开始将内容定位在容器中心。
所以你需要纠正这个，将内容的一半大小平移到左边和上面。
万一你不能依靠flexbox…把孩子放在父母的中心。当像素大小未知时(换句话说，总是如此)，在IE9+上也没有问题。
.parent{位置:相对的;｝ .child { 位置:绝对的; 上:50%; 左:50%; -ms-transform: -50%， -50%; 转换:翻译(-50%，-50%); ｝ <div class="parent" style="background: lightyyellow;填充:6 em”> <div class="child" style="background:gold;填充:1 em >本;< / div > < / div >
由于垂直对齐在td上可以正常工作，您可以在div中放置一个单格表来对齐它的内容。
<div>
<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
Aligned content here...
</td></tr></table>
</div>
很笨重，但据我所知还能用。它可能没有其他变通方法的缺点。
这很简单。只需在主类中添加display:table-cell。
.main {
height: 72px;
vertical-align: middle;
display:table-cell;
border: 1px solid #000000;
}
看看这个jsfiddle!
