我如何用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>
当前回答
#outer { 显示: 网; justify- 内容: 中心; } <div id="outer"> <div id="inner">hello</div> </div> 在这里输入代码
其他回答
我通常的方式是使用绝对的位置:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
外部迪夫不需要任何额外的属性来工作。
添加文本:中心;到 parent div
#outer {
text-align: center;
}
HTTPS://jsfiddle.net/7qwxx9rs/
或
#outer > div {
margin: auto;
width: 100px;
}
HTTPS://jsfiddle.net/f8su1fLz/
.outer {
text-align: center;
width: 100%
}
CSS
#inner {
display: table;
margin: 0 auto;
}
HTML
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
button {
margin: 0 auto;
width: fit-content;
display: block;
}
// container should have set width (for example 100%)