CSS full screen div with text in the middle

css, html, webkit

Solution

The standard approach is to give the centered element fixed dimensions, and place it absolutely:

<div class='fullscreenDiv'>
    <div class="center">Hello World</div>
</div>​

.center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
}​

- DEMO

Problem

I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following: ``` .fullscreenDiv { background-color: #e8e8e8; width: 100%; height: auto; bottom: 0px; top: 0px; left: 0; position: absolute; } ``` Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so. It only needs to work on webkit based browsers. I already tried to add a P element inside with `display` set to `table-cell` (a common way of centering text) without luck. Any suggestions?

Original source

Related problems