下面是CSS居中的幾種方法：
水平居中元素：
通用方法，元素的寬高未知
方式一：CSS3 transform
方式二：Flex 布局
適用于子元素為浮動，絕對定位，內聯元素，均可水平居中。
居中的元素為常規文檔流中的內聯元素(display: inline)
常見的內聯元素有：span, a, img, input, label 等等
此方法同樣適用于 display: inline-block 的元素。
居中的元素為常規文檔流中的塊元素(display: block)
常見的塊元素：div, h1~h6, table, p, ul, li 等等
方式一：設置 margin
此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。
方式二：修改為 inline-block 屬性
居中的元素為浮動元素
居中的元素為絕對定位元素
方式一：
方式二：
垂直居中元素：
通用方法，元素的寬高未知
方式一：CSS3 transform
方式二：Flex 布局
適用于子元素為浮動，絕對定位，內聯元素，均可垂直居中。
居中元素為單行文本
把文字的 line-height 設為文字父容器的高度，適用于只有一行文字的情況。
已知元素寬高
方式一：
方式二：
垂直居中元素：
1. 絕對居中定位
優點：
不僅可以實現在正中間，還可以在正左方，正右方
元素的寬高支持百分比 % 屬性值和 min-/max- 屬性
可以封裝為一個公共類，可做彈出層
瀏覽器支持性好
2. 負邊距居中
特點：
良好的跨瀏覽器特性,兼容 IE6 - IE7
靈活性差，不能自適應，寬高不支持百分比尺寸和 min-/max- 屬性
3. Transform 定位
特點：
內容可自適應，可以封裝為一個公共類，可做彈出層
可能干擾其他 transform 效果
4. Flexbox 布局
這是 CSS 布局未來的趨勢。Flexbox 是 CSS3 新增屬性，設計初衷是為了解決像垂直居中這樣的常見布局問題。
5. table-cell 居中
適用于子元素 display 為 inline-block, inline 類型的元素，需要已知父元素的寬高，且父元素的寬高不能設為百分比數。
6. font-size 配合 vertical-align 實現垂直居中
該方法的要點是給父元素設一個合適的 font-size 的值，這個值的取值為該父元素的高度除以 1.14 得到的值，并且子元素必須 是一個 inline 或 inline-block 元素，需要加上 vertical-align: middle 屬性。使用這種方法，子元素的寬度或高度都不必知道。
具體原理可以上網搜 vertical-align 垂直居中。
7. 文本內容居中
總結：CSS的居中的方法有很多，需要掌握的知識點也很多，為了很好地記憶和掌握CSS居中的相關知識，我們需要將其相關知識加以整理，歸納。最終達到物為我用的目的。
參考資料：
【1】敲代碼,學編程 ?知乎《詳解CSS居中布局技巧》
