Html – CSS full screen div with text in the middle


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?

Best Solution

The accepted answer works, but if:

  • you don't know the content's dimensions
  • the content is dynamic
  • you want to be future proof

use this:

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);

More information about centering content in this excellent CSS-Tricks article.

Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

Another great guide about flexboxs from CSS Tricks;