1.單行文字垂直居中,圖檔垂直居中：
（1）用簡單的一行代碼即可實作單行文字垂直居中：設定 line-height 的值 等于高度的值。代碼如下：
.div { height: 500px; line-height :500px; }
（2）圖檔垂直居中：設定line-height 的值等于高度值之後，再設定圖檔vertical-align:middle。代碼如下：
.div { height: 500px; line-height :500px; }
.div img { vertical-align: middle; }
(3)圖檔與文字垂直居中，代碼與圖檔垂直居中一樣，
.div { height: 500px; line-height :500px; }
.div img { vertical-align: middle; }
html代碼：
<li> <img src="img/58pic_53e07d958ee5c.gif" /> 實作文字與圖檔一行垂直居中 </li>
2.以下是一個通用的方法，可以實作單行，多行，文字垂直居中，還可以實作單張圖檔，圖檔與文字說明等。（相容IE8及以上）
利用這個 display: table-cell; vertical-align: middle; 如果是圖檔img 再加上 vertical-align: middle;
原理很簡單，display: table-cell 把它變成表格單元，表格單元預設就是把文字垂直居中。注意：這種方法會使設定的margin,padding無效。
html部分代碼如下：
CSS部分代碼如下：