我如何用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>
当前回答
Flex 有超过97%的浏览器支持覆盖范围,可能是解决这些问题的最佳方式:
#outer {
display: flex;
justify-content: center;
}
其他回答
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
使用:
#outerDiv { 宽度: 500px; } #innerDiv { 宽度: 200px; 边缘: 0 auto; } <div id="outerDiv"> <div id="innerDiv"> 内部内容</div> </div>
它不能集中,如果你不给它一个宽度,否则,它将采取,默认情况下,整个水平空间。
你可以做这样的事情
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
這也會垂直調整 #內部. 如果你不願意,移除顯示器和垂直調整的特性;
如果您不想设置固定宽,并且不需要额外的边界,则将显示器添加到您的元素中: inline-block。
你可以使用:
#element {
display: table;
margin: 0 auto;
}