我如何用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>
CSS
#outer{
display: grid;
place-items: center;
}
其他回答
CSS 定义内容属性
它将Flexbox元件调整到容器的中心:
#outer {
display: flex;
justify-content: center;
}
使用此代码:
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#inner {
width: 50%;
margin: 0 auto;
text-align: center;
}
中心的主要属性是边界:自动和宽度:根据要求:
.DivCenter{
width: 50%;
margin: auto;
border: 3px solid #000;
padding: 10px;
}
我在各个项目中使用的最好是
<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 链接
我们可以使用下一个CSS的类,允许中心垂直和垂直对其父母的任何元素:
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}