sav*_*ger 95 html css centering
所以我知道如果我们使用,我们可以将div水平居中margin:0 auto;.应该margin:auto auto;如何工作我认为它应该工作？垂直居中也是如此？
为什么不起作用vertical-align:middle;？
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
}<div class="black">
<div class="message">
This is a popup message.
</div>
</div>o.v*_*.v. 159
你不能使用:
vertical-align:middle因为它是不是适用于块级元素
margin-top:auto并且margin-bottom:auto因为他们使用的值将计算为零
margin-top:-50%因为基于百分比的边距值是相对于包含块的宽度计算的
实际上,文档流和元素高度计算算法的性质使得无法使用边距将元素垂直居中于其父元素内.每当垂直边距的值改变时,它将触发父元素高度重新计算(重新流动),这将反过来触发原始元素的重新中心...使其成为无限循环.
您可以使用:
这样的一些解决方法适用于您的场景; 这三个元素必须嵌套如下:
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
border: 1px solid orange;
}<div class="container">
<div class="helper">
<div class="content">
<p>stuff</p>
</div>
</div>
</div根据Browsershot,JSFiddle运行良好.
zpr*_*zpr 85
由于这个问题是在2012年提出的,我们在浏览器支持flexbox方面取得了很大进展,我觉得这个答案是强制性的.
如果父容器的显示是flex,则是,margin: auto auto(也称为margin: auto)将工作水平和垂直居中,如果无论它是一个inline或block元件.
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
}
#child {
margin: auto auto;
}<div id="parent">
<div id="child">hello world</div>
</div>请注意,宽度/高度不必绝对指定,如本例中使用相对于视口的大小调整的jfiddle.
虽然浏览器对flexboxes的支持在发布时处于历史最高水平,但许多浏览器仍然不支持它或需要供应商前缀.有关更新的浏览器支持信息,请参阅http://caniuse.com/flexbox.
由于这个答案得到了一些关注,我还想指出,margin如果您正在使用display: flex并且想要将容器中的所有元素集中在一起,则根本不需要指定:
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}<div id="parent">
<div>hello world</div>
</div>shs*_*haw 59
这是我发现的最佳解决方案:http://jsfiddle.net/yWnZ2/446/适用于Chrome,Firefox,Safari,IE8-11和Edge.
如果你有一个声明height(height: 1em,height: 50%,等),或者是在浏览器知道的高度(元素img,svg或canvas例如),那么所有你需要的垂直居中是这样的:
.message {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
您通常会希望指定width或max-width使内容不拉伸屏幕/容器的整个长度.
如果您使用此模式,您希望始终在视口中居中重叠其他内容,请使用position: fixed;两个元素而不是position: absolute.http://jsfiddle.net/yWnZ2/445/
这是一个更完整的文章:http://codepen.io/shshaw/pen/gEiDt
Gal*_*lit 17
这个页面中的任何一个解决方案都不适用(对我而言).
我的解决方案
Html
<body>
<div class="centered">
</div>
</body>
CSS
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我知道问题是从2012年开始,但我找到了最简单的方法,我想分享.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
和CSS:
#parent{
height: 100%;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
如果您知道要居中的div的高度,则可以将其绝对放置在其父级中,然后将top值设置为50%.这将使儿童div的顶部向下降50%,即太低.通过将其设置margin-top为其高度的一半将其拉回.所以现在你有一个孩子div的垂直中点坐在父母的垂直中点 - 垂直居中!
例:
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
}<div class="black">
<div class="message">
This is a popup message.
</div>
</div>