使用margin:auto来垂直alignmentdiv

所以我知道如果我们使用margin:0 auto;我们可以水平居中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> 

的jsfiddle

你不能使用:

vertical-align:middle因为它不适用于块级元素

margin-top:automargin-bottom:auto因为它们的使用值将计算为零

margin-top:-50%因为基于百分比的保证金值是相对于包含块的宽度计算的

实际上,文档stream和元素高度计算algorithm的性质使得不可能使用边距来将元素垂直地居中在其父元素中。 每当垂直边缘的值被改变,它将触发一个父元素高度重新计算(re-flow),这又将触发原始元素的重新中心…使其成为一个无限循环。

您可以使用:

像这样的一些解决方法适用于您的scheme; 这三个要素必须如此嵌套:

 .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 

这是我find的最好的解决scheme: http : //jsfiddle.net/yWnZ2/446/适用于Chrome,Firefox,Safari,IE8-11和Edge。

如果您有一个声明的heightheight: 1emheight: 50%等),或者它是浏览器知道高度的元素(例如imgsvgcanvas ),那么垂直居中所需的全部是:

 .message { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 

您通常会指定widthmax-width以便内容不会拉伸屏幕/容器的整个长度。

如果你使用这个模式,你总是想在视口中重叠其他内容,使用position: fixed; 对于这两个元素,而不是position: absolutehttp://jsfiddle.net/yWnZ2/445/

这是一个更完整的写法: http : //codepen.io/shshaw/pen/gEiDt

由于这个问题在2012年被问及,我们已经走了很长时间,浏览器支持flexboxes,我觉得这个答案是必须的。

如果你的父容器的显示是flex ,那么是的margin: auto auto将会工作在水平和垂直居中,不pipe它是一个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> 

这个页面的解决scheme都不能用(对我来说)。

我的解决scheme

HTML

 <body> <div class="centered"> </div> </body> 

CSS

 .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

我知道这个问题是从2012年开始的,但我find了最简单的方法,我想分享。

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% 。 这将把小孩子的头50%放在父母的头上,即太低。 将其margin-top设置为其一半高度,将其拉回。 所以现在你有一个坐在父母垂直中点的垂直中点 – 垂直居中!

例:

 .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> 

这两个解决scheme只需要两个嵌套元素。
第一如果内容是静态的 (手动中心),相对和绝对定位。

 .black { position:relative; min-height:500px; background:rgba(0,0,0,.5); } .message { position:absolute; margin: 0 auto; width: 180px; top: 45%; bottom:45%; left: 0%; right: 0%; } 

https://jsfiddle.net/GlupiJas/5mv3j171/

stream体devise – 下面的内容中心确切使用:

 .message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

https://jsfiddle.net/GlupiJas/w3jnjuv0/

您需要设置“最小高度”,以防内容超出窗口高度的50%。 您也可以通过针对移动设备和平板电脑的媒体查询来操作这个高度。 但只有当你使用响应式devise。

我觉得如果需要某些原因,你可以进一步使用简单的JavaScript / JQuery脚本来操纵最小高度或固定高度。

Seckound如果内容是stream畅的,你也可以使用表格和表格单元格的CSS属性与垂直alignment和文本alignment居中:

 /*in a wrapper*/ display:table; 

 /*in the element inside the wrapper*/ display:table-cell; vertical-align: middle; text-align: center; 

经常用作响应式网页devise解决scheme,通过网格调整和媒体查询来操作对象的宽度。

 .black { display:table; height:500px; width:100%; background:rgba(0,0,0,.5); } .message { display:table-cell; vertical-align: middle; text-align: center; } 

https://jsfiddle.net/GlupiJas/4daf2v36/

我更喜欢桌面解决scheme,以确切的内容为中心,但在某些情况下,相对绝对定位将更好地工作,特别是如果我们不想保持内容alignment的确切比例。

没有一个简单的方法可以将div垂直居中,在任何情况下都可以做到这一点。

不过,视情况而定,还有很多方法可以做到。

这里有几个:

  • 设置父元素的顶部和底部填充,例如padding:20px 0px 20px 0px
  • 使用表格,表格单元垂直居中
  • 设置父元素的相对位置和你想要垂直居中的绝对div,并将其设置为top:50px; 底部:50像素; 例如

你也可以谷歌“CSS垂直居中”

可变高度,上下边距自动

 .black {background:rgba(0,0,0,.5); width: 300px; height: 100px; display: -webkit-flex; /* Safari */ display: flex;} .message{ background:tomato; margin:auto; padding:5%; width:auto; } 
 <div class="black"> <div class="message"> This is a popup message. </div> 
 .black { display:flex; flex-direction: column; height: 200px; background:grey } .message { background:yellow; width:200px; padding:10px; margin: auto auto; } 
 <div class="black"> <div class="message"> This is a popup message. </div> </div> 

使用Flexbox:

HTML:

 <div class="container"> <img src="http://lorempixel.com/400/200" /> </div> 

CSS:

 .container { height: 500px; display: flex; justify-content: center; /* horizontal center */ align-items: center; /* vertical center */ } 

查看结果