我如何用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>
当前回答
可以使用 CSS 3 Flexbox. 在使用 Flexbox 时,您有两种方法。
设置主显示:flex; 并将属性 {justify-content:center;,align-items:center;} 添加到您的主元素。
#outer { 显示: flex; justify-content: center; align-items: center; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
设置父母显示:flex 并将 margin:auto 添加到孩子身上。
#outer { 显示: flex; } #inner { margin: auto; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
其他回答
方法1:使用边缘财产
如果元素不是区块级元素,然后添加显示器:区块属性到它。
#outer { 显示: flex; justify- 内容: 中心; 背景颜色: 银色; } #inner { 背景颜色: #f07878; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这是一个经典的方法,以中心元素. 设置位置:相对外部元素. 设置内部元素的位置为绝对和左: 50%. 这将推动内部元素从外部元素的中心开始. 现在使用转变属性和设置转变: 翻译X(-50%) 这将使元素的中心水平。
另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。
這裡有一個顯示水平和垂直調整的Fiddle。
更多信息可在Mozilla Developer Network上找到。
试试这:
<div id="a">
<div id="b"></div>
</div>
CSS:
#a{
border: 1px solid red;
height: 120px;
width: 400px
}
#b{
border: 1px solid blue;
height: 90px;
width: 300px;
position: relative;
margin-left: auto;
margin-right: auto;
}
如果您不想设置固定宽,并且不需要额外的边界,则将显示器添加到您的元素中: inline-block。
你可以使用:
#element {
display: table;
margin: 0 auto;
}
你可以做这样的事情
#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;
}
這也會垂直調整 #內部. 如果你不願意,移除顯示器和垂直調整的特性;