方法1： 設定塊元素的 height,line-height為相同的值：
作用於單行文字，使文字垂直居中顯示；
實現原理： line-height 與 font-size 的計算值之差（在 css 中成為「行間距」）分為兩半，分別加到乙個文字行內容的頂部和底部。（可以包含這些內容的最小框就是行框。）實現了單行文字居中；
方法2：vertical-align
適用於在塊元素裡存在大於乙個行內元素需要垂直居中時（如和文字需要垂直居中顯示時），可以通過對的標籤或文字的標籤（行內元素）設定vertical-align，可以達到效果；
vertical-align屬性的定義：該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。
如：
方法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;(假設元素在頂部；)
塊級 行內元素水平垂直居中方法
塊級元素水平垂直居中 為目標元素設定以下屬性 position absolute top 0 left 0 right 0 bottom 0 margin auto 行內元素水平垂直居中 在目標元素的父元素設定以下屬性 目標父元素內內容水平對齊方式 text align center 此元素會作為乙...
元素垂直居中方法
1 固定height的元素居中 1 使用絕對定位 相容所有瀏覽器，瀏覽器視窗縮小時，部分內容會消失 居中元素 content 2 在居中元素外插入乙個div 相容所有瀏覽器，瀏覽器視窗縮小時，內容不會消失 居中元素 main content 3 使用絕對定位，margin auto 相容所有瀏覽器，...
元素垂直居中方法總結
以下總結了一些常見的元素垂直居中方法 首先，基本的html和css為 wrap wrap div 我是前端狗 方法 方案一 絕對定位負margin50 方法 wrap v center 方案一 優化版 利用calc支援單位運算，致命缺點uc這2貨嗝屁了，國內移動端別想了 v center 方案一 再...