我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
最简单的答案: 添加边界:自动; 到内部。
<div class="outer">
<div class="inner">
Foo foo
</div>
</div>
CSS 代码
.outer{
width: 100%;
height: 300px;
background: yellow;
}
.inner{
width: 30%;
height: 200px;
margin: auto;
background: red;
text-align: center
}
查看我的 CodePen 链接: http://codepen.io/feizel/pen/QdJJrK
此分類上一篇
其他回答
最简单的方式之一......
<!DOCTYPE html>
<html>
<head>
<style>
#outer-div {
width: 100%;
text-align: center;
background-color: #000
}
#inner-div {
display: inline-block;
margin: 0 auto;
padding: 3px;
background-color: #888
}
</style>
</head>
<body>
<div id ="outer-div" width="100%">
<div id ="inner-div"> I am a easy horizontally centered div.</div>
<div>
</body>
</html>
#centered { 位置: 绝对; 左: 50%; 边缘左: -100px; } <div id="outer" style="width:200px"> <div id="centered"> Foo foo</div> </div>
确保母元素定位,即相对、固定、绝对或粘贴。
如果你不知道你的 div 的宽度,你可以使用 transform:translateX(-50%);而不是负面边界。
使用 CSS calc(),代码可以变得更简单:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
原则仍然是相同的;把项目放在中间,并补偿宽度。
另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。
這裡有一個顯示水平和垂直調整的Fiddle。
更多信息可在Mozilla Developer Network上找到。
最简单的方式:
#outer { 宽度: 100%; 文本平衡:中心; } #inner { 边缘:自动; 宽度: 200px; } <div id="outer"> <div id="inner">Blabla</div> </div>
#inter { 边界: 0.05em 固体黑色; } #outer { 边界: 0.05em 固体红色; 宽度:100%; 显示: flex; justify-content: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>
其他解决方案
您可以将此 CSS 应用到内部 <div>:
#inner {
width: 50%;
margin: 0 auto;
}
当然,你不需要设置宽度为50%,任何宽度低于含有<div>的将工作。
如果您正在针对 Internet Explorer 8 (及以后),可能更好地拥有此相反:
#inner {
display: table;
margin: 0 auto;
}
它将使内部元素的中心垂直,它工作而不设置特定的宽度。
工作例子在这里:
