我试图在另一个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/
当前回答
这里有两种方法做垂直对齐的例子。我用过，效果很好。一个是使用绝对定位，另一个是使用flexbox。
垂直对齐示例
使用flexbox，你可以通过display: flex;使用align-self。如果你也需要水平对齐，你可以在容器中使用align-items和justify-content。
如果不想使用flexbox，可以使用position属性。如果容器是相对的，内容是绝对的，那么内容就可以在容器内自由移动。如果你用top: 0;左:0;在内容中，它将位于容器的左上角。
然后，对齐它，你只需要改变顶部和左侧的引用为50%。这将从内容的左上角开始将内容定位在容器中心。
所以你需要纠正这个，将内容的一半大小平移到左边和上面。
其他回答
这里有两种方法做垂直对齐的例子。我用过，效果很好。一个是使用绝对定位，另一个是使用flexbox。
垂直对齐示例
使用flexbox，你可以通过display: flex;使用align-self。如果你也需要水平对齐，你可以在容器中使用align-items和justify-content。
如果不想使用flexbox，可以使用position属性。如果容器是相对的，内容是绝对的，那么内容就可以在容器内自由移动。如果你用top: 0;左:0;在内容中，它将位于容器的左上角。
然后，对齐它，你只需要改变顶部和左侧的引用为50%。这将从内容的左上角开始将内容定位在容器中心。
所以你需要纠正这个，将内容的一半大小平移到左边和上面。
要在另一个div中垂直居中一个span或div元素，添加相对于父div的位置和绝对于子div的位置。现在，子div可以位于div内的任何位置。
<div class="parent">
<div class="child">Vertically and horizontally centered child div</div>
</div>
css:
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
这似乎是最好的方法——从我最初的帖子到现在已经过去了一段时间，这是现在应该做的:
.main { 显示:表; /*可选CSS start */ 身高:90 px; 宽度:90 px; /*可选CSS end */ ｝ 在{ 边框:1px实体#000000; 显示:表格单元; vertical-align:中间; ｝ < div class = "主" > <div class="inner">这个</div> . < / div >
使用CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
使用"justify-content: center;"来水平对齐元素
注意:这可能无法在旧的IE中工作
这就是答案:
垂直对齐使元素相对于元素所在行的尺寸进行对齐。
参考:https://christopheraue.net/design/why-vertical-align-is-not-working
