身体高度时垂直居中div：100％无绝对位置 [英] vertically center div when body height: 100% without absolute pos

问题描述

我有这个要填充窗口：

html, body {
height: 100%;}

然后将一个容器也设置为高度：100％，如何在没有图片的情况下垂直居中放置div指定和设置高度（以像素为单位），并使用绝对定位 不 ？使用顶部填充：50％；底部填充50％无法正常工作-似乎会根据设备站点或浏览器窗口改变div。

then a container also set to height: 100%, how do I vertically center a div with an image without specifying and set height in pixels and without using absolute positioning? Using padding-top: 50%; padding-bottom 50%; isn't working - seems to shift the div depending on device site or browser window.

推荐答案

您可以使用 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

有关显示属性。

这篇关于身体高度时垂直居中div：100％无绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！