廢話不多說， 直接上菜。
菜系：水平居中
菜名一： 行內(塊)元素水平居中
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瀏覽器。
趕快動手試試吧！