使用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:auto和margin-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。
如果您有一个声明的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
由于这个问题在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 */ }
查看结果
