我试图在另一个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/
当前回答
试试这个，对我很有效:
/* 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;
其他回答
只需要把内容放在一个高度为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>
使用CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
使用"justify-content: center;"来水平对齐元素
注意:这可能无法在旧的IE中工作
这很简单。只需在主类中添加display:table-cell。
.main {
height: 72px;
vertical-align: middle;
display:table-cell;
border: 1px solid #000000;
}
看看这个jsfiddle!
试试这个，对我很有效:
/* 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;
这是一个现代的方法，它利用CSS Flexbox功能。 现在，只需将这些样式添加到.main容器中，就可以垂直对齐父容器中的内容
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; // To center align it horizontally as well
}
你也可以使用CSS网格(一个二维网格布局系统)。
.main {
display: grid;
justify-content: center;
align-content: center;
}
下面是一个简写方法，但浏览器的支持仍然很低- https://caniuse.com/?search=place-items。
.main {
display: grid; // flex - works for both
place-items: center;
}
你就可以开始了!
