Почему при центрировании через position: absolute и top/left: 50% часто используют transform: translate(-50%, -50%)?

Механика центрирования:

1. top: 50%; left: 50%; перемещает верхний левый угол элемента в центр родителя

2. transform: translate(-50%, -50%); смещает элемент обратно на половину его размеров

Преимущества подхода:

• Работает для элементов с неизвестными размерами

• Не требует знания точных размеров элемента

• Поддерживается во всех современных браузерах

Пример реализации:

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

Альтернативные методы:

• Flexbox: display: flex; justify-content: center; align-items: center;

• Grid: display: grid; place-items: center;

Когда использовать:

• Когда нужно поддерживать старые браузеры

• Для абсолютно позиционированных элементов

• Когда другие методы центрирования недоступны