如何让中间框中的内容垂直居中？
HTML:
<body>
<div id="header">Header content</div>
<div id="bodyBox">Body content</div>
<div id="footer">Footer content</div>
</body>
CSS:
body {
}
body > div {
border-radius:10px;
border:2px solid #AAA;
padding:10px;
text-align:center;
}
#header {
position:absolute;
height:50px;
top:10px;
right:10px;
left:10px;
}
#bodyBox {
position:absolute;
right:10px;
top:94px;
bottom:94px;
left:10px;
border-color:#35C12E;
background-color:#f0f4f0;
}
#footer {
position:absolute;
height:50px;
bottom:10px;
right:10px;
left:10px;
border-color:#B24842;
}
最佳答案
我通常不提倡强制显示表格，但在使用较旧的浏览器时很方便。还有其他两种选择:使用 CSS 转换或 Flexbox(后者较新，但不像前者那样得到广泛支持)。
这两种方法都需要将您的正文内容包装在一个附加元素中，例如 <div> :
<div id="bodyBox">
<div>
Body content
</div>
</div>
方案一:CSS Flexbox
另一种方式是使用CSS flexbox模型(见 demo )达到同样的效果。您必须将以下样式添加到 #bodyBox :
#bodyBox {
display: flex;
align-items: center;
justify-content: center;
}
解决方案 2:CSS 转换
这里的技巧是定位内部 <div>绝对位于其包含父级的顶部和左侧的 50%。但是，为了抵消定位由于<div>的计算尺寸，我们将使用 CSS 转换来这样做。您可能必须为 transform 使用供应商前缀上类。 **然而，一个主要的警告是包含父级的尺寸，#bodyBox必须显式预定义，因为绝对定位其子元素会使它们脱离文档流，从而导致父元素的高度折叠。
#bodyBox > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
关于css - 如何使中间框中的内容垂直居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22886273/