CSS寬度自適應(yīng)居中是前端開發(fā)中非常重要的一項(xiàng)技能。當(dāng)我們想要實(shí)現(xiàn)一個(gè)盒子居中且寬度自適應(yīng)時(shí)，就要使用到此技能。

在CSS中，寬度自適應(yīng)可以使用百分比來實(shí)現(xiàn)。如下所示：

.box{
width: 80%;
margin: 0 auto;
}

上述代碼中，我們使用了80%的寬度，并使用了 margin: 0 auto 屬性來實(shí)現(xiàn)居中。這個(gè)屬性的含義是：上下不設(shè)邊距，左右設(shè)為自動(dòng)。這樣就可以實(shí)現(xiàn)盒子的水平居中。

但是有一點(diǎn)需要特別注意，那就是盒子的寬度不能在HTML中設(shè)置。如果在HTML中設(shè)置了寬度，那么它將無法自適應(yīng)。

除了使用百分比之外，我們還可以使用vw、vh等來實(shí)現(xiàn)寬度自適應(yīng)。這些單位都是相對(duì)于視口寬度和視口高度的百分比。

下面我們來看一下vw和vh的使用：

.box{
width: 50vw;
height: 50vh;
margin: 0 auto;
}

上述代碼中，我們使用了視口寬度的50%作為盒子的寬度，使用視口高度的50%作為盒子的高度。然后使用 margin: 0 auto 屬性來實(shí)現(xiàn)居中。

總結(jié)一下，CSS寬度自適應(yīng)居中是我們?cè)谇岸碎_發(fā)中非常常見的一個(gè)技能，而且是非常重要的。我們可以使用百分比、vw、vh等單位來實(shí)現(xiàn)寬度自適應(yīng)。同時(shí)還需要注意，不能在HTML中設(shè)置盒子的寬度。