我试图在另一个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/
当前回答
只需要把内容放在一个高度为100%的表中，并为main div设置高度
<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
This paragraph should be centered in the larger box
</td></tr>
</table>
</div>
其他回答
这似乎是最好的方法——从我最初的帖子到现在已经过去了一段时间，这是现在应该做的:
.main { 显示:表; /*可选CSS start */ 身高:90 px; 宽度:90 px; /*可选CSS end */ ｝ 在{ 边框:1px实体#000000; 显示:表格单元; vertical-align:中间; ｝ < div class = "主" > <div class="inner">这个</div> . < / div >
这是一个伟大的文章如何垂直对齐.. 我喜欢漂浮式。
http://www.vanseodesign.com/css/vertical-centering/
HTML:
<div id="main">
<div id="floater"></div>
<div id="inner">Content here</div>
</div>
以及相应的风格:
#main {
height: 250px;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#inner {
clear: both;
height: 100px;
}
只需要把内容放在一个高度为100%的表中，并为main div设置高度
<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
This paragraph should be centered in the larger box
</td></tr>
</table>
</div>
万一你不能依靠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 >
这就是答案:
垂直对齐使元素相对于元素所在行的尺寸进行对齐。
参考:https://christopheraue.net/design/why-vertical-align-is-not-working
