水平居中，垂直居中，水平垂直居中 方法大全

廢話很少說， 直接上菜。

　　菜系：水平居中

　　　　菜名一： 行內(塊)元素水平居中

　　　　1. 經過 text-align: center 能夠實如今塊級元素內部的行內元素水平居中。

　　　　2. 若是塊級元素內部包着也是一個塊級元素，咱們能夠先將其由塊級元素改變爲行內塊元素(inline-block、inline-table、inline-flex、inline-grid)，再經過設置行內塊元素居中以達到水平居中。

　　

 

　　　　菜名二： 塊級元素水平居中

　　　　1. 將該塊級元素左右外邊距margin-left和margin-right設置爲auto

 　　　　

　　　　2. 使用absolute+transform

　　　　先將父元素設置爲相對定位，再將子元素設置爲絕對定位，向右移動子元素，移動距離爲父容器的一半，最後經過向左移動子元素的一半寬度以達到水平居中。

　　　　

　　　　須要注意的點：transform屬於css3內容，兼容性存在必定問題，高版本瀏覽器須要添加一些前綴。

　　　　3. 使用flex+justify-content  

　　　　經過CSS3中的彈性佈局flex中的justify-content屬性來達到水平居中。父子元素均可以。

　　　　

　　　　4. 使用flex+margin

　　　　經過flex將父容器設置爲爲FLEX佈局，再設置子元素居中。

　　　　

 

　　　　菜名三： 多塊級元素水平居中

　　　　1. 使用flex佈局

　　　　利用彈性佈局(flex)，實現水平居中，其中justify-content 用於設置彈性盒子元素在主軸（默認橫軸）方向上的對齊方式，本例中設置子元素水平居中顯示。

 　　　　

　　　　2. 使用inline-block

　　　　將水平排列的塊狀元素設爲display:inline-block，而後在父級元素上設置text-align:center。

 　　　　

 

　　　　菜名四： 絕對定位元素水平居中

　　　　經過子元素絕對定位，外加margin: 0 auto來實現。

　　　　

 

　　　　 菜系： 垂直居中

　　　　菜名一：行內元素垂直居中

　　　　1. 利用行高line-height

　　　　

　　　　2. 利用flex佈局

　　　　利用flex佈局實現垂直居中，其中flex-direction: column定義側軸方向爲縱向。這種方式在較老的瀏覽器存在兼容性問題。

　　　　

　　　　3. 利用表佈局（table）

　　　　利用表佈局的vertical-align: middle能夠實現子元素的垂直居中。

　　　　

 

　　　　菜名二： 塊級元素垂直居中

　　　　1. 使用absolute+負margin(已知寬高)

　　　　經過絕對定位元素距離頂部50%，並設置margin-top向上偏移元素高度的一半，就能夠實現了。

　　　　

　　　　2. 使用absolute+transform（未知寬高）

　　　　經過CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。可是部分瀏覽器存在兼容性的問題。

　　　　

　　　　3. 使用flex+align-items

　　　　經過設置flex佈局中的屬性align-items，使子元素垂直居中。

　　　　

　　　　4. 使用table-cell+vertical-align

　　　　經過將父元素轉化爲一個表格單元格顯示（相似 <td> 和 <th>），再經過設置 vertical-align屬性，使表格單元格內容垂直居中。

　　　　

　　　　

　　　　菜系三： 水平垂直居中

　　　　1. 絕對定位與負邊距實現（已知寬高）

 　　　　這種方式須要知道被垂直居中元素的高和寬，才能計算出margin值，兼容全部瀏覽器。

 　　　　

　　　　2. 絕對定位與margin:auto（已知寬高）

　　　　這種方式無需知道被垂直居中元素的高和寬，但不能兼容低版本的IE瀏覽器。

　　　　

　　　　3. 絕對定位+CSS3(未知元素的高寬)

　　　　利用Css3的transform，能夠輕鬆的在未知元素的高寬的狀況下實現元素的垂直居中。
　　　　CSS3的transform當然好用，但在項目的實際運用中必須考慮兼容問題，大量的hack代碼可能會致使得不償失。【移動端除外】

　　　　

　　　　4. flex佈局

　　　　利用flex佈局，其中justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。不能兼容低版本的IE瀏覽器。

　　　　

　　　　5. flex/grid+margin:auto

　　　　容器元素設爲 flex 佈局或是grid佈局，子元素只要寫 margin: auto 便可,不能兼容低版本的IE瀏覽器。

　　　　

　　　　趕快動手試試吧！