CSS中,想要讓邊框居中,有多種方法可以實(shí)現(xiàn)。
方法一: border-box盒子模型 .box{ box-sizing: border-box; width: 200px; height: 100px; border: 2px solid black; padding: 20px; margin: 0 auto; }
這種方法是通過將盒子模型的box-sizing屬性設(shè)置為border-box,使得盒子的border和padding值不會(huì)撐大盒子的寬度,從而可以在外層設(shè)置margin: 0 auto;實(shí)現(xiàn)邊框居中。
方法二: flex布局 .parent{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .box{ width: 200px; height: 100px; border: 2px solid black; }
通過將父元素的display屬性設(shè)置為flex,并設(shè)置justify-content和align-items屬性為center,可以實(shí)現(xiàn)子元素的邊框居中。
以上兩種方法都是比較常用的方式,能夠?qū)崿F(xiàn)較為完美的效果。不同場(chǎng)景下,可以根據(jù)具體情況選擇不同的方法實(shí)現(xiàn)邊框居中。