首先創(chuàng)建互相嵌套的兩個(gè)盒子

瀏覽器中打開，盒子的樣式為：

接下來是讓子盒子水平和垂直居中的五種方法：

方法一：利用文本水平居中text-align: center和行高line-height進(jìn)行實(shí)現(xiàn)

可以先通過display將子盒子轉(zhuǎn)換為行內(nèi)塊顯示模式，然后利用文本水平居中和行高獲得最終子盒子的水平和垂直居中。由于對(duì)齊方式的不同，需要給子盒子添加vertical-align: middle;

方法二：利用子絕父相和外邊距margin實(shí)現(xiàn)

先為父盒子設(shè)置相對(duì)定位，再為子盒子設(shè)置絕對(duì)定位，且絕對(duì)定位的四個(gè)方向的位移都設(shè)為0，然后將外邊距margin屬性值設(shè)置為auto即可。

方法三：利用子絕父相和左、上外邊距實(shí)現(xiàn)

先為父盒子設(shè)置相對(duì)定位，再為子盒子設(shè)置絕對(duì)定位，且將子盒子分別向右、向下移動(dòng)父盒子的一半，然后利用外邊距margin將子盒子分別向左、向上移動(dòng)子盒子的一半。

方法四：利用子絕父相和位移實(shí)現(xiàn)

先為父盒子設(shè)置相對(duì)定位，再為子盒子設(shè)置絕對(duì)定位，且將子盒子分別向右、向下移動(dòng)父盒子的一半，然后利用位移transform: translate;將子盒子分別向左、向上移動(dòng)子盒子的一半。

方法五：利用flex布局實(shí)現(xiàn)

首先在父元素中添加display:flex;使其顯示模式為flex布局模式，然后在父元素中添加主軸居中和側(cè)軸居中即可。 

最終結(jié)果顯示為：

到此這篇關(guān)于CSS子盒子水平和垂直居中的五種方法的文章就介紹到這了,更多相關(guān)CSS子盒子水平和垂直居中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論