我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
如果你知道它的宽度,让我们说它是1200像素,去:
.container {
width:1200px;
margin-left: calc(50% - 600px);
}
因此,基本上它将添加50%的左边边,低于已知宽的一半。
其他回答
中心的主要属性是边界:自动和宽度:根据要求:
.DivCenter{
width: 50%;
margin: auto;
border: 3px solid #000;
padding: 10px;
}
另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。
這裡有一個顯示水平和垂直調整的Fiddle。
更多信息可在Mozilla Developer Network上找到。
此分類上一篇: Margin:0px auto:
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
与网
一个非常简单和现代的方式是使用显示器:网:
div { 边界: 1px dotted 灰色; } #outer { 显示: 网; 地点标题: 中心; 高度: 50px; /* 不需要 */ } <!DOCTYPE html> <html> <head> </head> <body> <div id="outer"> <div> Foo foo</div> </div> </body> </html>
如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:
#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这使得内部的DIV变成一个可以与文本平行集中的内线元素。
