我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
我找到了类似的路径与边缘左,但它也可以留下。
#inner {
width: 100%;
max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
left: 65px; /* This has to be approximately the same as the max-width. */
}
其他回答
#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;
}
它将使内部元素的中心垂直,它工作而不设置特定的宽度。
工作例子在这里:
我只是建议使用正当内容:中心;当容器显示为 flex. 和文本平行:中心;当它是关于文本元素。
点击下面的代码并根据要求修改。
#content_block { 边界: 1px 固体黑色; padding: 10px; 宽度: 50%; 文本平衡:中心; } #container { 边界: 1px 固体红色; 宽度: 100%; padding: 20px; 显示: flex; justify-content: center; } <div id="container"> <div id="content_block"> Foo foo check</div> </div>
我知道我稍晚回答这个问题,我没有打扰阅读每一个答案,所以这可能是一个重复。
inner { width: 50%; background-color: Khaki; margin: 0 auto; }
我通常的方式是使用绝对的位置:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
外部迪夫不需要任何额外的属性来工作。
#centered { 位置: 绝对; 左: 50%; 边缘左: -100px; } <div id="outer" style="width:200px"> <div id="centered"> Foo foo</div> </div>
确保母元素定位,即相对、固定、绝对或粘贴。
如果你不知道你的 div 的宽度,你可以使用 transform:translateX(-50%);而不是负面边界。
使用 CSS calc(),代码可以变得更简单:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
原则仍然是相同的;把项目放在中间,并补偿宽度。