我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
在以前的例子中,他们使用的边界: 0 自动,显示:表和其他答案使用“转换和翻译”。
每个人都知道有一个 <center> 标签,它只是不受 HTML5 支持,但它在 HTML5 中工作。
而且它正在工作,但现在不只是MDN Web Docs,但其他网站建议不要再使用它。 在这里,我可以使用你可以看到MDN Web Docs的笔记。 但无论如何,有这样的方式。
此分類上一篇
其他回答
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
中心:自动宽度边界
这个盒子是垂直集中,通过将其右边和左边边界的宽度设置为“自动”。 这是实现垂直集中CSS的最佳方式,并且在大多数使用CSS2支持的浏览器中非常好。 不幸的是,Internet Explorer 5/Windows不响应这种方法 - 该浏览器的缺点,而不是技术。
Internet Explorer 5/Windows 不正确地应用CSS“文本平衡”属性到区块级元素。 声明“文本平衡:中心”为包含区块级元素(通常是BODY元素)的垂直集中在Internet Explorer 5/Windows中的框架。
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
}
#Content {
width: 500px;
margin: 0px auto;
text-align: left;
padding: 15px;
border: 1px dashed #333;
background-color: #EEE;
}
http://bluerobot.com/web/css/center1.html
Flex 有超过97%的浏览器支持覆盖范围,可能是解决这些问题的最佳方式:
#outer {
display: flex;
justify-content: center;
}
.outer - 完整的宽度.inner - 没有宽度设置(但可以指定最大宽度)
假设计算的元素的宽度为1000像素和300像素。
在.center-helper 中插入.center-helper 创建.center-helper 一个内线区块; 它变成相同的尺寸.center 使其宽 300 像素. 按.center-helper 50% 相对其父母; 此位置其左在 500 像素. 向外. 按.center-helper 50% 相对其父母; 此位置其左在 -150 像素. 向中帮助, 这意味着其左在 500 - 150 = 350 像素。
演示:
#inter { 边界: 0.05em 固体黑色; } #outer { 边界: 0.05em 固体红色; 宽度:100%; 显示: flex; justify-content: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
其他解决方案
您可以将此 CSS 应用到内部 <div>:
#inner {
width: 50%;
margin: 0 auto;
}
当然,你不需要设置宽度为50%,任何宽度低于含有<div>的将工作。
如果您正在针对 Internet Explorer 8 (及以后),可能更好地拥有此相反:
#inner {
display: table;
margin: 0 auto;
}
它将使内部元素的中心垂直,它工作而不设置特定的宽度。
工作例子在这里:
