我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
可以使用 CSS 3 Flexbox. 在使用 Flexbox 时,您有两种方法。
设置主显示:flex; 并将属性 {justify-content:center;,align-items:center;} 添加到您的主元素。
#outer { 显示: flex; justify-content: center; align-items: center; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
设置父母显示:flex 并将 margin:auto 添加到孩子身上。
#outer { 显示: flex; } #inner { margin: auto; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </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%;
}
要在中间调整一个 div 中间的 div -
.outer{ 宽度: 300px; /* 例如 */ 高度: 300px; /* 例如 */ 背景: 红色; }.inner{ 位置: 相对; 顶部: 50%; 左: 50%; 转换: 翻译(-50%, -50%); 宽度: 200px; 高度: 200px; 背景: 黄色; } <body> <div class='outer'> <div class='inner'></div> </div> </body>
这将使中间的内部迪夫均匀,垂直和水平。
中心的主要属性是边界:自动和宽度:根据要求:
.DivCenter{
width: 50%;
margin: auto;
border: 3px solid #000;
padding: 10px;
}
如果你知道它的宽度,让我们说它是1200像素,去:
.container {
width:1200px;
margin-left: calc(50% - 600px);
}
因此,基本上它将添加50%的左边边,低于已知宽的一半。
我在各个项目中使用的最好是
<div class="outer">
<div class="inner"></div>
</div>
.outer{
width: 500px;
height: 500px;
position: relative;
background: yellow;
}
.inner{
width: 100px;
height: 100px;
background:red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Fiddle 链接
