在網頁布局中，有時我們需要將元素水平居中，而又希望其寬度自適應。這時就可以使用 CSS 中的一些技巧來實現這個效果。

.container{
width: 100%;
text-align: center;
}
.box{
display: inline-block;
background-color: #ccc;
padding: 20px;
}

以上代碼中，我們在容器中使用了 text-align: center; 屬性將其中的所有元素都水平居中。而子元素則使用了 display: inline-block; ，這個屬性能夠讓塊級元素表現得像內聯元素，同時又能保持原先塊級元素的特性。它適用于需要對文本進行包裝的情況，而且在元素間添加空格時不會發生斷行。

在特定場景下，浮動也可以實現這個效果。如下所示：

.container{
width: 100%;
text-align: center;
}
.box{
float: none;
margin: 0 auto;
/* 其他樣式 */
}

這里我們將元素的浮動屬性設置為 none，再將左右邊距都設置為 auto，即可實現自適應寬度的水平居中。

以上就是 CSS 中實現元素水平居中且自適應寬度的兩種方式。如有不足之處，歡迎指正。