在網頁設計過程中，經常會遇到一些需要居中顯示的元素，如文本、圖片等。在這些元素的寬度已知的情況下，居中顯示并不難。但是當元素的寬度不定時，我們該如何實現居中顯示呢？

CSS 提供了多種方式實現不定寬度的居中顯示，以下介紹幾種常用的方法。

.center {
position: relative;
left: 50%;
transform: translateX(-50%);
}

這種方法使用了 CSS3 的 transform 屬性。它首先將元素的左邊緣定位在父元素的正中間（通過 left: 50%），然后再通過 transform 屬性將該元素向左移動自身寬度的一半（translateX(-50%)）。這樣就能保證元素在水平方向上居中顯示。

.center {
display: flex;
justify-content: center;
align-items: center;
}

這種方法使用了 CSS3 的 flexbox 布局。它通過將父元素設置為 flex 容器，并設置 justify-content 和 align-items 屬性都為 center，就能實現元素在水平和垂直方向上的居中顯示。

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這種方法使用了絕對定位。首先通過 top 和 left 屬性將元素的左上角定位在父元素的正中心，然后通過 transform 屬性將該元素向左和向上移動自身寬度和高度的一半（translate(-50%, -50%)）。這樣就能保證元素在水平和垂直方向上居中顯示。

通過以上方法，我們可以輕松實現不定寬度元素的居中顯示。需要根據具體情況選擇最合適的方法。