在說到這個問題的時候,也許有人會問CSS中不是有vertical-align屬性來設置垂直居中的嗎?即使是某些瀏覽器不支持我只需做少許的CSS Hack技術就可以啊!所以在這里我還要啰嗦兩句,CSS中的確是有vertical-align屬性,但是它只對(X)HTML元素中擁有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起作用。 
Tips: 完美解決方案在文末! 
一、單行垂直居中
如果一個容器中只有一行文字,對它實現居中相對比較簡單,我們只需要設置它的實際高度height和所在行的高度line-height相等即可。
如: 
這段代碼很簡,后面使用overflow:hidden的設置是為了防止內容超出容器或者產生自動換行,這樣就達不到垂直居中效果了。
二、多行未知高度文字的垂直居中
如果一段內容,它的高度是可變的那么我們就可以使用上一節講到的實現水平居中時使用到的最后一種方法,就是設定Padding,使上下的padding值相同即可。同樣的,這也是一種“看起來”的垂直居中方式,它只不過是使文字把<div>完全填充的一種訪求而已。可以使用類似下面的代碼:
新聞熱點
疑難解答