垂直中心div当身高:100%没有绝对位置

时间:2014-01-20 18:48:39

标签: css vertical-alignment

我有这个填充窗口:

html, body {
height: 100%;}

然后一个容器也设置为高度:100%,如何使用图像垂直居中div而不指定和设置高度(以像素为单位)和 不使用 使用绝对定位?使用填充顶部:50%;填充底部50%;不起作用 - 似乎根据设备站点或浏览器窗口移动div。

2 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:3)

今天,display:tabletable-cell变得简单,您可以让标签作为<table>做出反应。 基本上:

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

身体中的任何东西都将在中间垂直对齐。 对于文本小盒子,在body或margin上使用text-align:auto。 你可以将显示转移到body和div而不是html和body。