CSS寬度自適應居中是前端開發中非常重要的一項技能。當我們想要實現一個盒子居中且寬度自適應時，就要使用到此技能。

在CSS中，寬度自適應可以使用百分比來實現。如下所示：

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

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

但是有一點需要特別注意，那就是盒子的寬度不能在HTML中設置。如果在HTML中設置了寬度，那么它將無法自適應。

除了使用百分比之外，我們還可以使用vw、vh等來實現寬度自適應。這些單位都是相對于視口寬度和視口高度的百分比。

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

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

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

總結一下，CSS寬度自適應居中是我們在前端開發中非常常見的一個技能，而且是非常重要的。我們可以使用百分比、vw、vh等單位來實現寬度自適應。同時還需要注意，不能在HTML中設置盒子的寬度。