目錄
四、基於視口單位的解決方案(僅適用於基於視口的居中)
五、基於使用css3彈性布局（flexbox）的解決方案
六、單行文字時的居中
六、多行文字的居中
新增於2016-8-28：
在css中對元素進行水平居中是非常簡單的：如果它是乙個行內元素，就對它的父元素應用text-align:center;如果它是乙個塊級元素，就對它自身應用margin:auto。然而要對乙個元素進行垂直居中，就有點束手無策了，本文介紹了幾種常用的垂直居中方法以供參考！
一、**布局法
利用**的vertical-align屬性，當然首先將顯示方式設定為**，如下：
看，我又居中沒？
二、基於行內塊的解決方案(來自於第二篇參考文獻)
這種方法確實講究技巧，在實際實施中估計也不常用，但還是有必要介紹一下。具體思路是在包裹元素內設定乙個「ghost」元素，使其高度為包裹元素的100%，然後同時設定「ghost」元素和居中元素的dispaly屬性為inline-block,同時vertical-align:middle.這個"ghost"元素可以是乙個空的標籤，更好的方法是使用::before或者::after偽元素來代替.
看，我居中沒？
三、基於絕對定位的解決方案
1.絕對定位+負的外邊距
看，我居中沒？
使用這種方法要求居中的元素具有固定的寬度和高度。
上面的方法本質上做了這樣幾件事情：先把要居中的元素的左上角放在已定位祖先元素的正中心，然後再利用負外邊距把它向左、向上移動（移動距離相當於自身寬高的一半），從而把元素的正中心放置在祖先元素的正中心。借助css3中強大的calc()函式（當然實際實施過程中要考慮瀏覽器的相容性），.content的樣式還可以設定成：
注意：表示式中有「+」和「-」時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的calc函式的具體用法可以參考：
css3的calc()使用
2.絕對定位+margin:auto
實現原理：利用css定位規則，設定左右、上下方向定位為0，margin為auto，讓css根據定位計算margin值，用hack的方式實現居中。居中塊的尺寸需要固定。
寸需要可控
看，我居中沒？
上面提到的兩種絕對定位的方案最大的侷限就是它要求元素的寬度和高度固定。下面介紹的第三種基於絕對定位的方案則不會出現這個問題，對於需要居中的元素寬高是否固定沒有硬性要求,這樣居中元素的尺寸就由其內容確定了。
3.絕對定位+transform反向偏移
還是上面的例子將內部元素的設定負的外邊距的那兩句改成
使用這種方法對於居中元素寬高沒有要求的原因是在translate()變形函式中使用百分比時，是以這個元素本身的寬度和高度為基準進行換算和移動的。
當然了，使用基於絕對定位的方法一定要先知道你要居中的物件是哪乙個，這樣才能對其設定絕對定位，這是與**布局法明顯不同的地方。
四、基於視口單位的解決方案(僅適用於基於視口的居中)
假如不想使用絕對定位，仍然可以採用translate()技巧來讓元素以其自身寬高一半進行偏移，但是如果使用絕對定位，也就無法使用left和top使元素左上角位於容器正中心。
我們的第一反應很可能是用margin屬性的百分比來實現。
看，我居中沒？
實際上的結果卻如上圖所示，元素到了視口的下方。原因在於margin的百分比是以父元素的寬度作為基準的。在《css揭秘》這本大作中提到了一種方法可以正確使元素基於視口居中，該方法採用視口單位vh作為長度單位。1vh表示視口單位的1%。
看，我居中沒？
五、基於使用css3彈性布局（flexbox）的解決方案
css3的伸縮盒布局簡直是一切布局的救星，遺憾的是，很多老瀏覽器不支援，哎哎哎哎！
看，我居中沒？
想讓.content居中就是這麼簡單,使包裹元素display: flex;要居中的元素margin: auto;這樣水平和垂直方向都居中了，而且對於居中元素的寬高也沒有要求。
flexbox還有另乙個好處在於，它可以在不知道需要居中的元素是什麼的情況下使居中元素居中，就像方法一的效果一樣，具體實現是借助：align-items和justify-content仍然用上面的例子.
實現效果相同。
六、單行文字時的居中
可以利用line-height屬性與元素高度相同
看，我居中沒？
六、多行文字的居中
如何實現父容器高度固定，文字可能一行，兩行或更多行的垂直居中對齊呢？
可以用乙個span標籤將所有的文字封裝起來，設定文字與相同的display屬性（inline-block屬性），然後用處理垂直居中的方式處理文字的垂直居中即可。
核心css**如下，
//外部div標籤：
div//內部span標籤：
span
新增於2016-8-28：
參考：
css揭秘（英文原版：css secrets）
centering in the unknown
CSS實現元素水平居中 垂直居中 水平垂直居中
1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...
css實現元素水平垂直居中
利用負邊距實現子元素居中 相對于父元素 position relative 需已知子元素的width與height 且把子元素的position設為absolute，絕對定位 以及設定left和top為50 再加上負邊距，margin left值為width的一半，同樣的，margin top值為h...
css實現元素垂直水平居中
css實現垂直居中的方法 方法一 父元素display flex 子元素margin auto auto fa son 方法二 父元素display flex 並設定justify content center align items center fa son 方法三 在不改變父元素的前提下，只修...