在前端佈局中居中方式可以說是家常便飯，幾乎所有地方都需要用到他，我們常見的就是水平居中和垂直居中。今天小編帶大家就看看常用到的這些居中方式都有哪些實現方式。
水平居中：水平居中就是爲了讓子元素在父元素中排列在水平中心位置，實現方式很多，我們看幾種常用的。
- 使用display：inline-block和text-align：center
原理就是將子容器設置爲行內塊元素，然後給父容器設置讓文字居中的屬性以達到目的。
缺點就是裏面文字都會居中，可單獨設置樣式來解決。
- 使用display：table和margin：0 auto
原理就是先將子容器設置爲塊級表格來顯示，然後設置居中來實現。缺點就是不兼容ie低版本瀏覽器。
在這裏小編建了一個前端學習交流扣扣羣：132667127，我自己整理的最新的前端資料和高級開發教程，如果有想需要的，可以加羣一起學習交流
- 使用position：absolute和transform
原理就是先將子容器設置爲相對定位，移動左側距離爲相對寬度的一半，這樣會使整個容器的左側在一半的線的位置，看起來靠右了，我們需要再通過向左移動子容器的一半來達到目的。
缺點就是transform屬於css3內容，存在瀏覽器兼容問題。可以將transform換成margin-left設置自身寬度一半達到相同的目的。
- 使用flex和margin
原理就是通過css3佈局屬性flex將子容器轉換爲flex item情況，然後設置子容器居中即可。
缺點就是css3屬性，有瀏覽器兼容問題。
- 使用flex和justify-content
原理就是通過css3佈局屬性flex將子容器轉換爲flex item情況，然後通過justify-content
屬性來達到居中。這種方式需要給父容器設置這兩種屬性。
缺點就是css3屬性，有瀏覽器兼容問題。
垂直居中：垂直居中就是爲了讓子元素在父元素中排列在垂直中心位置，實現方式很多，我們看幾種常用的。
- 使用display：table-cell和vertical-align：middle
原理就是通過將父容器轉換爲一個表格單元格來顯示，再通過將表格單元格內容垂直居中。
使用時需要將兩種屬性都設置到父容器身上。
- 使用position：absolute和transform
原理類似於水平居中，就是先將子容器設置爲相對定位，移動頂部距離爲相對高度的一半，這樣會使整個容器的頂部在一半的線的位置，看起來靠下了，我們需要再通過向上移動子容器的一半來達到目的。
缺點就是css3屬性，有瀏覽器兼容問題。可以將transform換成margin-top設置自身高度一半達到相同的目的。
- 使用flex和align-items
原理就是通過css3佈局屬性flex將子容器轉換爲flex item情況，然後通過align-items
屬性來達到居中。這種方式需要給父容器設置這兩種屬性。
缺點就是css3屬性，有瀏覽器兼容問題。
而關於水平垂直同時居中的話有了以上兩種方式難道還怕出不來嗎，只是需要稍稍結合一下即可，比如以下常見結合使用：
-
使用absolute和transform
-
使用flex和justify-content和align-items
- 使用inline-block和text-align和table-cell和vertical-align