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