我如何用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="a">
<div id="b"></div>
</div>
CSS:
#a{
border: 1px solid red;
height: 120px;
width: 400px
}
#b{
border: 1px solid blue;
height: 90px;
width: 300px;
position: relative;
margin-left: auto;
margin-right: auto;
}
其他回答
.outer { 背景颜色: rgb(230,230,255); 宽度: 100%; 高度: 50px; }.inner { 背景颜色: rgb(200,200,255); 宽度: 50%; 高度: 50px; 边界: 0 auto; } <div class="outer"> <div class="inner"> 边界 0 auto </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;
}
此分類上一篇
中心一个Div在一个Div
.outer { 显示: -webkit-flex; 显示: flex; //-webkit-justify-content: center; //justify-content: center; //align-items: center; width: 100%; height: 100px; background-color: lightgrey; }.inner { 背景颜色: cornflowerblue; padding: 2rem; margin: auto; //align-self: center; } <div class="outer"> <div class="inner"
这将你的内心分散为垂直和垂直:
#outer{
display: flex;
}
#inner{
margin: auto;
}
只有垂直调整,变化
margin: 0 auto;
垂直,变化。
margin: auto 0;
您可以添加此代码:
#inner { 宽度: 90%; margin: 0 auto; text-align:center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>