我如何用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的盒子相匹配属性
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
其他回答
我使用Flexbox或CSS网络
Flexbox #outer{ 显示: flex;正当内容:中心; } CSS 网络 #outer { 显示: 内线网络; 网络模板线: 100px 100px; 网络模板列: 100px 100px; 网络错误: 3px; }
你可以以多种方式解决这个问题。
读完所有答案后,我看不到我最喜欢的答案,这就是你如何将一个元素集中在另一个元素中。
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;
}
这个方法也很好地工作:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
对于内部<div>,唯一的条件是其高度和宽度不应大于其容器的高度。
它不能集中,如果你不给它一个宽度,否则,它将采取,默认情况下,整个水平空间。
CSS
#inner {
display: table;
margin: 0 auto;
}
HTML
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>