Vertically center fixed height heading in css

I have a title

<h1>My Header</h1>


It has height 150px

and a font-size

, for example 1.3em;

How to make heading text vertically centered with CSS. I'd rather not wrap it in a container DIV (wrapping divs really beat the whole CSS idea).


source to share

2 answers

Your best bet 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 alignment.



If the header height is 150px, can you also set it line-height

to 150px?

    font-size: 1.3em;
    line-height: 150px;
    height: 150px;




All Articles