css - 当 body 高度为 : 100% without absolute pos 时垂直居中 div

Question

我有这个来填充窗口:

html, body {
height: 100%;}

然后容器也设置为 height: 100%，如何在不指定和设置像素高度的情况下将带有图像的 div 垂直居中，并且不使用绝对定位？使用 padding-top: 50%;底部填充 50%；不工作 - 似乎根据设备站点或浏览器窗口移动 div。

Answer 1

您可以使用 display:table 和 display:table-cell:

html, body {
    width: 100%;
    height: 100%;
}

body{
    margin: 0;
    display: table
}

body>div {
    display: table-cell; 
    text-align: center; /* horizontal */
    vertical-align: middle; /* vertical */
}

<div>
    <img src="http://paw.princeton.edu/issues/2012/07/11/pages/6994/C-beer.jpg" />
</div>

JSFiddle

更多关于 display property .