我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
您可以使用 CSS Flexbox 来实现这一点. 您只需要将 3 个属性应用到母元素,以便一切都工作。
#outer {
display: flex;
align-content: center;
justify-content: center;
}
看看下面的代码会让你更好地了解属性。
了解更多关于CSS Flexbox的信息
#outer { 显示: flex; align 标题: 中心; justify 内容: 中心; 边界: 1px 固体 #ddd; 宽度: 100%; 高度: 200px; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
其他回答
集中一个未知的高度和宽度的DIV
它与合理的现代浏览器(Firefox,Safari/WebKit,Chrome,Internet & Explorer & 10,Opera等)工作。
.content { 位置: 绝对; 左: 50%; 顶: 50%; 转换: 翻译(-50%, -50%); } <div class="content"> 这与任何内容工作</div>
在 Codepen 或 JSBin 上加入它。
使用此代码:
<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;
}
<!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中心标签。
使用:
<div id="parent">
<div class="child"></div>
</div>
风格:
#parent {
display: flex;
justify-content: center;
}
如果你想把它集中在水平上,你应该写下如下:
#parent {
display: flex;
justify-content: center;
align-items: center;
}
