使用線高度居中文字

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 */ 
}

注意: 此方法僅垂直居中單行文字。它不會正確地居中塊元素,如果文字突破到一個新行,你將有兩個非常高的文字行。