Vertical center div at body height: 100% without absolute value

Question

I have this to fill a window:

html, body {
height: 100%;}

then the container also sets the height: 100%, how to vertically center the div with the image without specifying and setting the height in pixels and without , using absolute positioning? Using padding-top: 50%; lower dose 50%; not working - it seems to shift the div depending on the device’s site or browser window.

Answer 1

You can use display:tableand 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>

Run codeHide result

Jsfiddle

Read more about display properties .

Answer 2

, display:table table-cell , , <table>. :

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

, , . , : . div html body.