How to vertically center text

Question

I want text centered vertically in a box. I don't want to use padding-top, because it will not be correct for text of every length. I have posted an example here: http://jsfiddle.net/55Ruh/23/

Answer 1

You can use the table attribute vertical-align like this (on your example):

the html:

<div class="bg_class">
  <div class="bg_class_inner">
    My text goes here...My text goes here...My text goes here...
    My text goes here...My text goes here...My text goes here...
    My text goes here...My text goes here...My text goes here...
    My text goes here...My text goes here...
  </div>
</div>

the css:

.bg_class
{
  background: green;
  width: 300px;
  height: 200px;
  text-align: center;
  margin: 0 auto;
  display: table; 
}
.bg_class_inner
{
  display: table-cell;
  text-align: center;
  vertical-align: middle
}