CSS中，left屬性用于設置元素的水平位置。如果想讓元素水平居中，很多人會想到使用left屬性來將元素左移50%。那么，這個方法真的可行嗎？

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

實際上，僅靠left: 50%是無法實現元素水平居中的。因為這里的50%是基于元素的左邊緣的，而不是基于它的中心點。因此，元素會把它的左邊沿移動到容器的50%位置上，導致它的中心點不在容器的正中央。

為了確保元素水平居中，我們需要在left: 50%之后再加上一個transform: translateX(-50%)的樣式。這個樣式將會將元素本身的寬度在水平方向上向左移動一半。這樣，元素的中心點就會被正確地置于容器的正中央。

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

這樣，我們就可以在CSS中使用left: 50%和transform: translateX(-50%)來將元素水平居中了。但是需要注意的是，這個方法只適用于已知寬度的元素。對于寬度不確定的元素，我們需要通過其他方式來實現水平居中。