Vertically center text in a 100% height div?

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 😀

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?

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)