使用margin：auto垂直对齐div

使用margin：auto垂直对齐div

您不能使用：

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 >    <div >        <div > <p>stuff</p>        </div>    </div></div

根据Browsershot，JSFiddle可以正常工作。