總結(jié)CSS居中的多種方法_html/css_WEB-ITnose
來源：懂視網(wǎng)
責(zé)編：小采
時(shí)間：2020-11-27 16:36:43
總結(jié)CSS居中的多種方法_html/css_WEB-ITnose
總結(jié)CSS居中的多種方法_html/css_WEB-ITnose:使用 CSS 讓頁面元素居中可能是我們頁面開發(fā)中最常見的攔路虎啦，接下來總結(jié)一下常見的幾種居中方法吧。 1. 首先來聊聊水平居中： text-align 與 inline-block 的配合 就像這樣： See the Pen mVpVEr by xal821792703 ( @ho
導(dǎo)讀總結(jié)CSS居中的多種方法_html/css_WEB-ITnose:使用 CSS 讓頁面元素居中可能是我們頁面開發(fā)中最常見的攔路虎啦，接下來總結(jié)一下常見的幾種居中方法吧。 1. 首先來聊聊水平居中： text-align 與 inline-block 的配合 就像這樣： See the Pen mVpVEr by xal821792703 ( @ho
使用 CSS 讓頁面元素居中可能是我們頁面開發(fā)中最常見的攔路虎啦，接下來總結(jié)一下常見的幾種居中方法吧。
1. 首先來聊聊水平居中：
text-align 與 inline-block 的配合
就像這樣：
See the Pen mVpVEr by xal821792703 ( @honoka ) on CodePen .
HTML 中在想要居中的元素外面套了一個(gè)父元素，然后在 CSS 中將父元素的 text-align 屬性設(shè)為 center，接下來將子元素的 display 屬性設(shè)為 inline-block 就可以水平居中了。
通過 margin 實(shí)現(xiàn)
See the Pen rxpxmR by xal821792703 ( @honoka ) on CodePen .
通過 margin 實(shí)現(xiàn)連父元素都不用套了，直接 margin: 0 auto; 搞定，對(duì)，就是這么簡(jiǎn)單快捷，恐怕是居中最常用的方法了吧。
2. 結(jié)果老板表示只是水平居中不行，還得垂直居中：
還是上 margin 來實(shí)現(xiàn)一下絕對(duì)定位元素的水平垂直居中吧
See the Pen NxXxBz by xal821792703 ( @honoka ) on CodePen .
注意代碼中的幾個(gè)關(guān)鍵點(diǎn)：
子元素 div 絕對(duì)定位 父元素需要被定位 子元素 top、bottom、left、right 四個(gè)位置值均為 0 子元素 margin: auto; 來自 CSS3 的新殺器 flex
See the Pen xZpZMw by xal821792703 ( @honoka ) on CodePen .
使用 flex 容器布局實(shí)現(xiàn)水平垂直居中的關(guān)鍵點(diǎn)在于：
父元素 display 屬性設(shè)為 flex 垂直布局的屬性是 align-items，設(shè)為 center 時(shí)便垂直居中 水平布局的屬性是 justify-content，設(shè)為 center 時(shí)水平居中 子元素彈性居中，增加子元素也不會(huì)有影響 另外請(qǐng)注意兼容性問題，見下圖：
其實(shí)利用 CSS 實(shí)現(xiàn)居中還有許多方法我沒有寫在博文中，如何選擇居中的技術(shù)方案，最后還是得取決于當(dāng)前業(yè)務(wù)場(chǎng)景下的瀏覽器支持程度和適合度。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
總結(jié)CSS居中的多種方法_html/css_WEB-ITnose
總結(jié)CSS居中的多種方法_html/css_WEB-ITnose:使用 CSS 讓頁面元素居中可能是我們頁面開發(fā)中最常見的攔路虎啦，接下來總結(jié)一下常見的幾種居中方法吧。 1. 首先來聊聊水平居中： text-align 與 inline-block 的配合 就像這樣： See the Pen mVpVEr by xal821792703 ( @ho
