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 my question is.

How do I vertically center the line of text?

I have tried using:

display: table-cell;   line-height:200%; 

If it is important the div is absolutely positioned.

---

Current CSS

.requests {     position: absolute;     right: 0;     height: 100%;     width: 50px;     padding: 0 10px;     background-color: #69A4B5;     display: table-cell;     vertical-align: middle;     border-bottom-right-radius: 5px; } 

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?