我如何用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>
当前回答
<div id="outer"> <div id="inner">Foo foo</div> </div>
其他回答
克里斯·科伊尔(Chris Coyier)在他的博客上写了一篇关于“在未知中集中”的好文章,这是一个多种解决方案的环节,我发表了一个没有发表在这个问题上,它有更多的浏览器支持,而不是Flexbox解决方案,你不使用显示:表;这可能会破坏其他事情。
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
我认为这将是一个解决方案:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
两个元素必须是相同的宽度,以便单独运作。
如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:
#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这使得内部的DIV变成一个可以与文本平行集中的内线元素。
使用:
#outerDiv { 宽度: 500px; } #innerDiv { 宽度: 200px; 边缘: 0 auto; } <div id="outerDiv"> <div id="innerDiv"> 内部内容</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;");
});