CSS Vertical Centering Centering Text with Line Height
Example
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.
