CSS居中那些事

作前端這一年多來，其實一直都是偏向於js先後端，css什麼的老是抱着夠用就好的心態，歷來沒有系統的學習或總結過，結果如今的水平也一直停留在夠用的階段。感受做爲一名合格的前端工程師，不能讓css成爲本身的短板，因而簡單的總結一下，高手繞路。

水平居中

咱們在實際工做中常會遇到須要設置水平居中的場景，好比爲了美觀，文章的標題通常都是水平居中顯示的。
這裏咱們又得分兩種狀況：行內元素 仍是 塊狀元素 ，塊狀元素裏面又分爲定寬塊狀元素，以及不定寬塊狀元素。

行內元素

若是被設置元素爲文本、圖片等行內元素時，水平居中是經過給父元素設置 text-align:center 來實現的。

塊狀元素

當被設置元素爲 塊狀元素 時用text-align：center就不起做用了，這時也分兩種狀況：定寬塊狀元素和不定寬塊狀元素。

定寬塊狀元素

知足定寬和塊狀兩個條件的元素是能夠經過設置「左右margin」值爲「auto」來實現居中的。如：

div{
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}

不定寬塊狀元素

在實際工做中咱們會遇到須要爲「不定寬度的塊狀元素」設置居中，好比網頁上的分頁導航，由於分頁的數量是不肯定的，因此咱們不能經過設置寬度來限制它的彈性。

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都不少）：

1. 加入table標籤包裹或使用disable:table-cell

爲何選擇方法一加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），所以能夠看作一個定寬度塊元素，而後再利用定寬度塊狀居中的margin的方法，使其水平居中。

2. 設置display: inline方法

改變塊級元素的 display 爲 inline 類型（設置爲 行內元素 顯示），而後使用 text-align:center 來實現居中效果。

與第一種相似，顯示類型設爲行內元素，進行不定寬元素的屬性設置。

3. 使用left:50%配合transform: translateX(-50%)

這個就好說啦，子元素相對父元素向右偏移父元素的50%，而後在相對於自身向左偏移自身的50%,完事。

垂直居中

咱們在實際工做中也會遇到須要設置垂直居中的場景，好比好多報紙的文章標題在左右一側時，經常會設置爲垂直居中，爲了用戶體驗性好。

這裏咱們又得分兩種狀況：父元素高度肯定的單行文本，以及父元素高度肯定的多行文本。

父元素高度肯定的單行文本

父元素高度肯定的單行文本的豎直居中的方法是經過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。

line-height 與 font-size 的計算值之差，在 CSS 中成爲「行間距」。分爲兩半，分別加到一個文本行內容的頂部和底部。

這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。

父元素高度肯定的多行文本

1. 利用display: table-cell和vertical-align: middle

在 chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性，但注意 IE六、7 並不支持這個樣式,