在網頁開發中，我們常常需要將元素水平居中。在之前的方法中，我們曾通過設置固定寬度并設置margin來實現元素居中，但是這種方法存在一些弊端：一是無法適應不同屏幕尺寸的設備，二是無法適應內容長度不定的情況。

幸運的是，我們可以使用一種新的技術——不定寬實現居中。這種方法利用了CSS3中的transform屬性和偽元素:before/:after，不依靠瀏覽器默認的塊級元素寬度，適應性更強。實現方法如下：

.container{
display: flex; /* 使用flex布局 */
justify-content: center; /* 將元素置于容器中心 */
align-items: center; 
position: relative;  /* 讓偽元素相對于.container容器 */
}
.container:before{
content:"";
display: inline-block;
height: 100%;   /* 與.container相同高度 */
vertical-align: middle;   /* 垂直居中 */
}
.centered-element{
display: inline-block; /* div元素默認寬度為auto，可以將其看成是行內元素 */
vertical-align: middle; /* 與偽元素一同垂直居中 */
transform: translateX(-50%); /* 將div元素向左偏移50% */
}

通過以上實現方法，我們就可以輕松實現不定寬元素的居中了。需要注意的是，如果你需要使用這種方法來實現響應式頁面，建議將使用@media查詢的CSS樣式代碼放在中。