CSS中實(shí)現(xiàn)子div水平居中有多種方式,以下介紹兩種常用方法。
方法一:使用text-align
將父div的text-align屬性設(shè)置為center,將子div的display屬性設(shè)置為inline-block即可實(shí)現(xiàn)水平居中。
父div{ text-align: center; } 子div{ display: inline-block; }
方法二:使用margin
利用子div的margin屬性,將左右margin設(shè)置為auto,實(shí)現(xiàn)居中。
父div{ position: relative; } 子div{ position: absolute; left: 50%; margin-left: -子div寬度的一半; }
其中,方法二需要將父div的position屬性設(shè)置為relative,子div的position屬性設(shè)置為absolute,left設(shè)為50%。由于left的值為相對(duì)于父div左邊的距離,因此還需將子div的margin-left設(shè)為負(fù)的寬度的一半。
以上兩種方法都能實(shí)現(xiàn)子div的水平居中,具體使用哪種取決于具體需求。