身体高度时垂直居中的div：100％没有绝对位置答案

【问题标题】：vertically center div when body height: 100% without absolute pos身体高度时垂直居中的div：100％没有绝对位置
【发布时间】：2014-02-10 01:59:48
【问题描述】：

我有这个来填满窗口：

html, body {
height: 100%;}

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

【问题讨论】：

是否边距：0 自动；为此做点什么？

标签： css vertical-alignment

【解决方案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 。

【讨论】：

【解决方案2】：

今天，display:table 和 table-cell 让事情变得简单，您可以像 <table> 那样使用标签来做出反应。基本上：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
html {
    display: table;
}
body {
    display: table-cell;
    vertical-align: middle;
}

正文中的任何内容都将在中间垂直对齐。对于文本小框，在正文或边距上使用文本对齐：自动。您可以将 display 转移到 body 和 div 而不是 html 和 body。

【讨论】：