vertically center div when body height: 100% without absolute pos

Question

I have this to fill the window:

html, body {
height: 100%;}

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.

Does margin: 0 auto; do anything for this? – Dan H Jan 20 '14 at 19:01 — Dan H, Jan 20 '14 at 19:01

Vucko · Accepted Answer · 2015-02-16T07:44:17.100

5

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

More on display property .

edited Feb 16 '15 at 07:44

answered Jan 20 '14 at 19:08

Vucko

20,555
10
56
107

score 4 · Answer 2 · edited Jun 20 '16 at 19:43

today, display:table and table-cell make it easy, you can have tags to react as a <table> would. basicly :

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

whatever will be in body will be vertical-align in the middle. for text a small box , use text-align on body or margin : auto. you can transfer display to body and div instead html and body.

vertically center div when body height: 100% without absolute pos

2 Answers2

Linked