in vertical center of a 100% height div

Question

My div height is 100%, but when I do this I don't know how I can vertically center a P-tag in the center.

How do I do this?

HTML:

<div>
<p>This text has to be vertically centered.</div>
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 100%;
    width: 100%;
    background: url(http://www.windsim.com/images/sky/sky_107.bmp) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

p {
    font-family: "Times New Roman", Times, serif;
    color: black;
    text-align: center;
    font-size: 65px;
}

Ooh sorry, the search didn't find this one, thanks! – Milan Feb 28 '14 at 15:55 — Milan, Feb 28 '14 at 15:55

score 1 · Answer 1 · edited May 23 '17 at 12:03

One way is to use the method outlined below, note that the body & html styles are optional, used to create a better illustration in the provided fiddle.

The crux is the fact the <p> will need to be contained within a parent element, and both will need the styles outlined below.

Fiddle

HTML

<div>
    <p>text</p>
</div>

CSS

html, body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;

}
div {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}

p {
  display: table-cell;
  vertical-align: middle;
}

I'd also recommend you have a look at some of the alternative approaches shown here

in vertical center of a 100% height div

1 Answers1

Fiddle