在網頁設計中，許多元素的寬度都是不固定的。這就給水平居中帶來了困難。在這種情況下，CSS 提供了一些方式來實現寬度不定元素的水平居中。

/* 第一種方法：使用 margin:auto */
.container {
width: 80%;
margin: 0 auto;
}
/* 第二種方法：使用 Flexbox */
.container {
display: flex;
justify-content: center;
}
.container .element {
width: auto;
}
/* 第三種方法：使用 position 和 transform */
.container {
position: relative;
}
.container .element {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 第四種方法：使用 text-align */
.container {
text-align: center;
}
.container .element {
display: inline-block;
}

以上四種方法各有優缺點，根據不同的情況選擇不同的方法來實現寬度不定元素的水平居中。其中，使用 margin:auto 的方法是最常用的一種。