Centering Text with Line Height

HTML:

<div class="container">
    <span>vertically centered</span>
</div>

CSS:

.container{
    height: 50px;           /* set height */
    line-height: 50px;      /* set line-height equal to the height */
    vertical-align: middle; /* works without this rule, but it is good having it explicitly set */ 
}

Note: This method will only vertically center a single line of text. It will not center block elements correctly and if the text breaks onto a new line, you will have two very tall lines of text.

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents