Vertically center text in a 100% height div?

Question

I am working with a div that is 100% of the parent divs height.

The div only contains a single line of text.

The div cannot have a fixed height.

So m

Answer 1

The best and easiest way to do it (currently in 2015 2020) is using flexbox:

.parent-selector {
    display: flex;
    align-items: center;
}

And that's it :D

Check-out this working example:

div {
    border: 1px solid red;
    height: 150px;
    width: 350px;
    justify-content: center;

    /* Actual code */
    display: flex;
    align-items: center;
}

<div>
    <p>Hola</p>
</div>

Old answer: You can use vertical-align: middle if you specify also display: table-cell;

.div {
    display: table-cell;
    vertical-align: middle;
}

Working example:

div {
  border: 1px solid red;
  height: 150px;
  width: 350px;
  text-align: center;
  
  /* Actual code */
  display: table-cell;
  vertical-align: middle;
}

<div>
    <p>Hola</p>
</div>

If it does not work you can try setting its parent as display: table;:

.parent-selector {
    display: table;
}

Edit: You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?

Answer 2

Try this one http://jsfiddle.net/Husamuddin/ByNa3/ it works fine with me,
css

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

and the html

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>

Answer 3

Even though this question is pretty old, here's a solution that works with both single and multiple lines that need to be centered vertically (could easily be centered both vertically & horizontally as seen in the css in the Demo.

HTML

<div class="parent">
    <div class="child">Text that needs to be vertically centered</div>
</div>

CSS

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 4

If you know how tall your text is going to be you can use a combination of top:50% and margin-top:-x px where x is half the height of your text.

Working example: http://jsfiddle.net/Qy4yy/

Answer 5

Vertical align, dynamic height combined with absolute position is except some special conditions not possible without a few lines of JS (eg. jQuery). (can possibly be solved with backend code in some cases, or min-height combined with sensible top or margin styles, but not perfect)

I mostly only use absolute position when something is supposed to "popup" in relation to something else which is in the float, I think that's the best way to use it so you don't have to fiddle with things like this.

No offense, but most answers in here are way off.

Answer 6

Did you try vertical-align: middle ???

You can find more info on vertical-align here: http://www.w3schools.com/css/pr_pos_vertical-align.asp