Vertically center a title with fixed height in css

Question

I have a header

<h1>My Header</h1>

It has a height of 150px and a font-size of say 1.3em; How can I make the header text vertically centered with CSS. I would rather not wrap it in a container DIV (wrapping divs really defeat the whole CSS idea).

Answer 1

If the height of the title is 150px, could you also set the line-height to 150px?

h1
{
    font-size: 1.3em;
    line-height: 150px;
    height: 150px;
}

Answer 2

The best way is to add this rule:

h1 {
    line-height: 150px;
}

You don't need to set the height value, and the font size doesn't affect the vertical align.