我如何用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>
当前回答
中心:自动宽度边界
这个盒子是垂直集中,通过将其右边和左边边界的宽度设置为“自动”。 这是实现垂直集中CSS的最佳方式,并且在大多数使用CSS2支持的浏览器中非常好。 不幸的是,Internet Explorer 5/Windows不响应这种方法 - 该浏览器的缺点,而不是技术。
Internet Explorer 5/Windows 不正确地应用CSS“文本平衡”属性到区块级元素。 声明“文本平衡:中心”为包含区块级元素(通常是BODY元素)的垂直集中在Internet Explorer 5/Windows中的框架。
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
}
#Content {
width: 500px;
margin: 0px auto;
text-align: left;
padding: 15px;
border: 1px dashed #333;
background-color: #EEE;
}
http://bluerobot.com/web/css/center1.html
其他回答
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
添加文本:中心;到 parent div
#outer {
text-align: center;
}
HTTPS://jsfiddle.net/7qwxx9rs/
或
#outer > div {
margin: auto;
width: 100px;
}
HTTPS://jsfiddle.net/f8su1fLz/
另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。
這裡有一個顯示水平和垂直調整的Fiddle。
更多信息可在Mozilla Developer Network上找到。
设置宽度,并设置边缘向左和边缘向右到自动。 这是仅限于水平,但是. 如果你想要两种方式,你只会做这两种方式. 不要害怕尝试; 它不像你会打破任何东西。
而不是多种包装和/或自动边缘,这个简单的解决方案对我来说工作:
<div style="top: 50%; left: 50%;
height: 100px; width: 100px;
margin-top: -50px; margin-left: -50px;
background: url('lib/loading.gif') no-repeat center #fff;
text-align: center;
position: fixed; z-index: 9002;">Loading...</div>
它将Div放在视图(垂直和水平)的中心,尺寸和调整尺寸,中心背景图像(垂直和水平),中心文本(水平),并保持Div在视图和内容的顶部。