我如何用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的宽度,然后使用下面的CSS。
CSS
.inner{
width: 500px; /* Assumed width */
margin: 0 auto;
}
其他回答
您可以使用显示器: flex 为您的外部 div 和到水平中心 您必须添加 justify 内容: 中心
#outer{
display: flex;
justify-content: center;
}
或者您可以参观w3schools - CSS flex Property 更多想法。
您可以垂直调整任何元素,使用:
<div align=center>
(code goes here)
</div>
或:
<!-- css here -->
.center-me {
margin: 0 auto;
}
<!-- html here -->
<div class="center-me">
(code goes here)
</div>
让它简单!
#outer { 显示: flex; justify-content: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
我们可以使用Flexbox来实现这一点:
<div id="outer">
<div id="inner">Foo foo</div>
</div>
中心一个 div 内部一个 div 垂直:
#outer {
display: flex;
justify-content: center;
}
此分類上一篇
中心一个DIV内部一个DIV垂直:
#outer {
display: flex;
align-items: center;
}
此分類上一篇
到完全中间的 div 垂直和垂直:
#outer{
display: flex;
justify-content: center;
align-items: center;
}
此分類上一篇
我们可以使用下一个CSS的类,允许中心垂直和垂直对其父母的任何元素:
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}