CSS центрирование transform: translate(-50%, -50%)

224

14 мая 2018, 08:30

В CSS есть интересное преобраазование: transform: translate(-50%, -50%);. Позволяет расположить элемент точно по центру экрана, если в результате применения центрирования типа text-align:center он оказался немного смещен.

Как работает такое преобразование? Если ему передать аргументы типа (1, 2), элемент будет смещен на такое число пикселей. А что означают проценты? От чего они отсчитываются?

Answer 1

Аргументы - это дельта по оси X и Y соответсвенно. 50% - это 50% размера центрируемого элемента. При размещении position: absolute; left: center; top: center; по центру размещается левая верхняя точка элемента. Поэтому его приходится сдвигать на половину размера.