我如何用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" style="width:100%"> <div id="inner">Foo foo</div> </div>
其他回答
我通常的方式是使用绝对的位置:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
外部迪夫不需要任何额外的属性来工作。
可以使用中心标签为方便
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
你可以以不同的方式做到这一点. 请参见下面的例子:
1. First Method
#outer {
text-align: center;
width: 100%;
}
#inner {
display: inline-block;
}
2. Second method
#outer {
position: relative;
overflow: hidden;
}
.centered {
position: absolute;
left: 50%;
}
我找到了类似的路径与边缘左,但它也可以留下。
#inner {
width: 100%;
max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
left: 65px; /* This has to be approximately the same as the max-width. */
}
中心的主要属性是边界:自动和宽度:根据要求:
.DivCenter{
width: 50%;
margin: auto;
border: 3px solid #000;
padding: 10px;
}