CSS full screen div with text in the middle

Question

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?

```text-align: center; position: absolute; top: 50%; bottom: 50%; width: 100%;``` - This should work better than the accepted answer - Add the styles to your bit of text — James111, Feb 23 '16 at 23:30

agconti · Answer 1 · 2015-02-21T22:18:59.147

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:

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

Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 55 · Accepted Answer · edited Nov 24 '12 at 06:32

55

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

edited Nov 24 '12 at 06:32

Zhanger

1,290
14
19

answered May 22 '12 at 17:53

calebds

25,670
9
46
74

1

I'm trying with this, but if I wanted to center the text in the middle of the "center" div as well? – Juan Alberto López Cavallotti May 22 '12 at 18:06
@JuanAlbertoLópezCavallotti You would just be reproducing the problem. Adding `text-align: center` to the `center` class would get you halfway there. If its just 1 line of text, you can add `line-height: 50px`, or whatever the height of the centered container is. That will vertically center it as well. – calebds May 22 '12 at 18:10
2

Not sure if the extra element was needed but here you go: http://jsfiddle.net/wzSmc/1/ – FelipeAls May 22 '12 at 18:12
2

@JuanAlbertoLópezCavallotti updated DEMO: http://jsfiddle.net/paislee/wzSmc/2/ – calebds May 22 '12 at 18:15
Thanks @paislee that solved my problem it is looking the right way and that's what counts! – Juan Alberto López Cavallotti May 22 '12 at 18:21
Also thank you @FelipeAlsacreations I used part of your solution too. The inner p was not necessary! – Juan Alberto López Cavallotti May 22 '12 at 18:22

Samuel Rossille · Answer 3 · 2012-05-22T18:01:17.167

There is no pure CSS solution to this classical problem.

If you want to achieve this, you have two solutions:

Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning

EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good

score 1 · Answer 4 · answered May 22 '12 at 17:51

1

text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)

answered May 22 '12 at 17:51

Ryan

5,644
3
38
66

CSS full screen div with text in the middle

4 Answers4