我如何用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>
当前回答
Firefox 和 Chrome:
<div style="width:100%;"> <div style="width: 50%; margin: 0px auto;"> 文本</div> </div>
适用于 Internet Explorer、Firefox 和 Chrome:
<div style="width:100%; text-align:center;"> <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div> </div>
文本同步:属性是现代浏览器的可选,但在 Internet Explorer Quirks 模式中需要继承浏览器的支持。
其他回答
可以使用 CSS 3 Flexbox. 在使用 Flexbox 时,您有两种方法。
设置主显示:flex; 并将属性 {justify-content:center;,align-items:center;} 添加到您的主元素。
#outer { 显示: flex; justify-content: center; align-items: center; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
设置父母显示:flex 并将 margin:auto 添加到孩子身上。
#outer { 显示: flex; } #inner { margin: auto; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
使用:
<style>
#outer{
text-align: center;
width: 100%;
}
#inner{
text-align: center;
}
</style>
中心一个元素,不需要动态高度和宽度的旋转器/父母
没有副作用:它不会限制一个集中元素的宽度低于视门宽度,当使用Flexbox中的边缘在一个集中元素内
position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
垂直 + 垂直中心,如果其高度与宽度相同:
position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
div{
width: 100px;
height: 100px;
margin: 0 auto;
}
通常情况下,如果您正在使用DIV静态方式。
如果你想要一个Div集中在Div是绝对的父母,这里是例子:
.parentdiv{
position: relative;
height: 500px;
}
.child_div{
position: absolute;
height: 200px;
width: 500px;
left: 0;
right: 0;
margin: 0 auto;
}
中心的主要属性是边界:自动和宽度:根据要求:
.DivCenter{
width: 50%;
margin: auto;
border: 3px solid #000;
padding: 10px;
}