在前端布局中居中方式可以說是家常便飯，幾乎所有地方都需要用到他，我們常見的就是水平居中和垂直居中。今天小編帶大家就看看常用到的這些居中方式都有哪些實現(xiàn)方式。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的立山網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

水平居中：水平居中就是為了讓子元素在父元素中排列在水平中心位置，實現(xiàn)方式很多，我們看幾種常用的。

1. 使用display：inline-block和text-align：center

原理就是將子容器設(shè)置為行內(nèi)塊元素，然后給父容器設(shè)置讓文字居中的屬性以達到目的。

缺點就是里面文字都會居中，可單獨設(shè)置樣式來解決。

2. 使用display：table和margin：0 auto

原理就是先將子容器設(shè)置為塊級表格來顯示，然后設(shè)置居中來實現(xiàn)。缺點就是不兼容ie低版本瀏覽器。

在這里小編建了一個前端學習交流扣扣群：132667127，我自己整理的最新的前端資料和高級開發(fā)教程，如果有想需要的，可以加群一起學習交流

3. 使用position：absolute和transform

原理就是先將子容器設(shè)置為相對定位，移動左側(cè)距離為相對寬度的一半，這樣會使整個容器的左側(cè)在一半的線的位置，看起來靠右了，我們需要再通過向左移動子容器的一半來達到目的。

缺點就是transform屬于css3內(nèi)容，存在瀏覽器兼容問題?？梢詫ransform換成margin-left設(shè)置自身寬度一半達到相同的目的。

4. 使用flex和margin

原理就是通過css3布局屬性flex將子容器轉(zhuǎn)換為flex item情況，然后設(shè)置子容器居中即可。

缺點就是css3屬性，有瀏覽器兼容問題。

5. 使用flex和justify-content

原理就是通過css3布局屬性flex將子容器轉(zhuǎn)換為flex item情況，然后通過justify-content

屬性來達到居中。這種方式需要給父容器設(shè)置這兩種屬性。

缺點就是css3屬性，有瀏覽器兼容問題。

垂直居中：垂直居中就是為了讓子元素在父元素中排列在垂直中心位置，實現(xiàn)方式很多，我們看幾種常用的。

1. 使用display：table-cell和vertical-align：middle

原理就是通過將父容器轉(zhuǎn)換為一個表格單元格來顯示，再通過將表格單元格內(nèi)容垂直居中。

使用時需要將兩種屬性都設(shè)置到父容器身上。

2. 使用position：absolute和transform

原理類似于水平居中，就是先將子容器設(shè)置為相對定位，移動頂部距離為相對高度的一半，這樣會使整個容器的頂部在一半的線的位置，看起來靠下了，我們需要再通過向上移動子容器的一半來達到目的。

缺點就是css3屬性，有瀏覽器兼容問題?？梢詫ransform換成margin-top設(shè)置自身高度一半達到相同的目的。

3. 使用flex和align-items

原理就是通過css3布局屬性flex將子容器轉(zhuǎn)換為flex item情況，然后通過align-items

屬性來達到居中。這種方式需要給父容器設(shè)置這兩種屬性。

缺點就是css3屬性，有瀏覽器兼容問題。

而關(guān)于水平垂直同時居中的話有了以上兩種方式難道還怕出不來嗎，只是需要稍稍結(jié)合一下即可，比如以下常見結(jié)合使用：

1. 使用absolute和transform

2. 使用flex和justify-content和align-items

3. 使用inline-block和text-align和table-cell和vertical-align

網(wǎng)頁名稱：前端小白進階之路-技巧篇（垂直水平居中）-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/cshoos.html