在網(wǎng)頁開發(fā)中，我們常常需要將元素水平居中。在之前的方法中，我們?cè)ㄟ^設(shè)置固定寬度并設(shè)置margin來實(shí)現(xiàn)元素居中，但是這種方法存在一些弊端：一是無法適應(yīng)不同屏幕尺寸的設(shè)備，二是無法適應(yīng)內(nèi)容長(zhǎng)度不定的情況。

幸運(yùn)的是，我們可以使用一種新的技術(shù)——不定寬實(shí)現(xiàn)居中。這種方法利用了CSS3中的transform屬性和偽元素:before/:after，不依靠瀏覽器默認(rèn)的塊級(jí)元素寬度，適應(yīng)性更強(qiáng)。實(shí)現(xiàn)方法如下：

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

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