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

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

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

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

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

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

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

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

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

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

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

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

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

最終結果顯示為：

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

最新評論