Почему «left: 50%, Transform: TranslateX(-50%)» центрирует элемент по горизонтали? ⇐ CSS

[Anonymous]

Недавно я провел рефакторинг некоторых элементов CSS и был приятно удивлен, обнаружив более простой способ горизонтального выравнивания моего абсолютно позиционированного элемента:

Код: Выделить всё

.prompt-panel {
left: 50%;
transform: translateX(-50%);
}

Это отлично работает! Даже если ширина моего элемента автоматическая. Однако я не понимаю, что происходит, чтобы это действительно работало. Я предполагал, что TranslateX — это просто современное, более производительное средство перемещения элемента, но, похоже, это не так.

Не должны ли эти два значения исключают друг друга? Кроме того, почему

Код: Выделить всё

.prompt-panel {
left: -50%;
transform: translateX(50%);
}

не показывает тот же результат, что и первый фрагмент кода?

Подробнее здесь: https://stackoverflow.com/questions/259 ... an-element