方法1： 設定塊元素的 height,line-height為相同的值：

作用於單行文字，使文字垂直居中顯示；

實現原理： line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文字行內容的頂部和底部。（可以包含這些內容的最小框就是行框。）實現了單行文字居中；

方法2：vertical-align

 適用於在塊元素裡存在大於一個行內元素需要垂直居中時（如圖片和文字需要垂直居中顯示時），可以通過對圖片的標籤或文字的標籤（行內元素）設定vertical-align，可以達到效果；

vertical-align屬性的定義：該屬性定義行內元素的基線相對於該元素所在行的基線

如：<div>

              <span></span>

              <img src="***">

     </div>

span {vertical-align: middle;}  表示圖片的基線相對於span文字的垂直方向上的中部對齊；

方法3：設定display: table-cell;vertical-align: middle;達到垂直居中；

適用於在塊元素記憶體在行內元素，塊元素的混合元素時，且需要將它們垂直居中；

注：此方法存在相容性問題；ie7和ie6都不能識別 display: table-cell;（但是支援display: block等css1的屬性！） 
ie8以及以後版本可以識別；使用display:inline-block屬性代替display:table-cell就完全ok的啦！

方法4： 絕對定位+負外邊距；

使某個行內元素垂直居中，可以先絕對定位，設定top:50%,margin-top:-2/height;(假設元素在頂部；)