這一章節(jié)我們來(lái)學(xué)習(xí)已知寬高實(shí)現(xiàn)盒子水平垂直居中。通常使用定位完成,例如想要實(shí)現(xiàn)以下效果:
我們有如下兩個(gè)div元素
要實(shí)現(xiàn)子元素相對(duì)于父元素垂直水平居中,我們只需要輸入以下代碼:
技術(shù)點(diǎn)的解釋:
1、利用父元素設(shè)置相對(duì)定位,子元素設(shè)置絕對(duì)定位,那么子元素就是相對(duì)于父元素定位的特性。
2、子元素設(shè)置上和左偏移的值都為50%,是元素的左上角在父元素中心點(diǎn)的位置。效果:
3、然后再用margin給上和左都給負(fù)的自身寬高的一半,就能達(dá)到垂直水平居中的效果。
掌握已知寬高實(shí)現(xiàn)盒子水平垂直居中的用法,并自行實(shí)現(xiàn)一遍效果。
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)