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

Question

transform: translate(-50%, -50%) смещает элемент обратно на половину его собственной ширины и высоты, что позволяет точно отцентрировать элемент относительно точки top/left: 50%.

YeaHub · Accepted Answer

Механика центрирования:top: 50%; left: 50%; перемещает верхний левый угол элемента в центр родителя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;Когда использовать:Когда нужно поддерживать старые браузерыДля абсолютно позиционированных элементовКогда другие методы центрирования недоступны