我如何用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 style="top: 50%; left: 50%;
height: 100px; width: 100px;
margin-top: -50px; margin-left: -50px;
background: url('lib/loading.gif') no-repeat center #fff;
text-align: center;
position: fixed; z-index: 9002;">Loading...</div>
它将Div放在视图(垂直和水平)的中心,尺寸和调整尺寸,中心背景图像(垂直和水平),中心文本(水平),并保持Div在视图和内容的顶部。
其他回答
如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:
#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
这使得内部的DIV变成一个可以与文本平行集中的内线元素。
.outer { 背景颜色: rgb(230,230,255); 宽度: 100%; 高度: 50px; }.inner { 背景颜色: rgb(200,200,255); 宽度: 50%; 高度: 50px; 边界: 0 auto; } <div class="outer"> <div class="inner"> 边界 0 auto </div> </div>
它是如此简单。
只需决定你想要给内部Div的宽度,然后使用下面的CSS。
CSS
.inner{
width: 500px; /* Assumed width */
margin: 0 auto;
}
读完所有答案后,我看不到我最喜欢的答案,这就是你如何将一个元素集中在另一个元素中。
jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/
<p>Horz Center</p>
<div class="outterDiv">
<div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
<div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
<div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
position: absolute;
top:50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.horzCenter
{
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.trueCenter
{
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.outterDiv
{
position: relative;
background-color: blue;
width: 10rem;
height: 10rem;
margin: 2rem;
}
.innerDiv
{
background-color: red;
width: 5rem;
height: 5rem;
}
<center>
我被最简单的中心所知道的混乱了吗?
</center>