我如何用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:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
其他回答
使用:
<div id="parent">
<div class="child"></div>
</div>
风格:
#parent {
display: flex;
justify-content: center;
}
如果你想把它集中在水平上,你应该写下如下:
#parent {
display: flex;
justify-content: center;
align-items: center;
}
您可以垂直调整任何元素,使用:
<div align=center>
(code goes here)
</div>
或:
<!-- css here -->
.center-me {
margin: 0 auto;
}
<!-- html here -->
<div class="center-me">
(code goes here)
</div>
例如,请参见此链接和下面的剪辑:
div#outer { 高度: 120px; 背景颜色: 红色; } div#内部 { 宽度: 50%; 高度: 100%; 背景颜色: 绿色; 边缘: 0 自动; 文本平衡: 中心; /* 文本平衡到中心垂直. */ 线高度: 120px; /* 文本平衡到中心垂直。
如果你有很多孩子在一个父母之下,那么你的CSS内容应该像这个例子。
HTML 内容看起来喜欢此:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
然后,看看这个例子在Fiddle。
CSS
#inner {
display: table;
margin: 0 auto;
}
HTML
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
只是这样做:
<div id="outer">
<div id="inner">Foo foo</div>
</div>
CSS
#outer{
display: grid;
place-items: center;
}