Centering text vertically with CSS

Question

How can I vertically center text in an element?

For example, from this:

to this:

I know I can specify the height property on the text and then use

position: absolute;
top: 0;
bottom: 0;
margin: 0;

but I don't want this because the height of the text is variable.

Answer 1

Check this out: https://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css

HTML:

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

CSS:

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

Demo