我如何用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”,“positioning”,“margin”等。
我推荐使用“Flex”
#outer {
display: flex;
justify-content: center;
align-items: center; /* if you also need vertical center */
}
使用地平线定位
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
translate: transformX(-50%)
}
垂直和垂直,使用定位
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
translate: transform(-50%, -50%)
}
使用边界的垂直调整
#inner {
width: fit-content;
margin: 0 auto;
}
其他回答
如果您不想设置固定宽,并且不需要额外的边界,则将显示器添加到您的元素中: inline-block。
你可以使用:
#element {
display: table;
margin: 0 auto;
}
可以使用中心标签为方便
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
#outer { 顯示: flex; align 項目: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
這應該是你的孩子或 #內部 div 地平線. 但你實際上看不到任何變化. 因為我們的 #外部 div 沒有高度,或者說,它的高度是自動設定的,所以它有相同的高度的所有兒童元素。
#outer { 高度: 500px; 显示: flex; 匹配元素: 中心; 背景颜色: 蓝色; } #inner { 高度: 100px; 背景: 黄色; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
如果有人想要一个 jQuery 解决方案的中心调整这些 divs:
$(window).bind("load", function() {
var wwidth = $("#outer").width();
var width = $('#inner').width();
$('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
这就是你想要的最短的方式。
JSFIDDLE
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}