我如何用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;
}
其他回答
使用此代码:
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#inner {
width: 50%;
margin: 0 auto;
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#outer{
display:flex;
align-items:center;
}
<!DOCTYPE html> <html> <head> <title>Center</title> <style>.outer{ 文本平衡:中心; }.inner{ 宽度: 500px; 边界: 0 自动; 背景: 棕色; 颜色: 红色; } </style> </head> <body> <div class="outer"> <div class="inner"> 此 DIV 是中心的</div> </div> </body>
请尝试一下,它将工作没有HTML中心标签。
这对我工作:
#inner {
position: absolute;
margin: 0 auto;
left: 0;
width: 7%;
right: 0;
}
在此代码中,您将确定元素的宽度。
您可以添加另一个具有相同尺寸的Div,并将其移动到左侧 -50%(半宽的Div)和50%的Div。
此分類上一篇: <div id="outer"> <div id="inner"><div>Foo foo</div></div> </div>