Записки HTML-верстальщика: выравниваем элемент по центру экрана без JS
Здрасте всем!
В этом лайфхаке верстальщика я бы хотел подсказать начинающим верстальщикам (и не только) очень удобный вариант выравнивания какого-либо элемента по центру экрана или какого-либо другого родительского элемента.
Проблема: выровнять любой элемент по горизонтали и вертикали экрана или родительского элемента без использования JS.
Решение: одним из самых привлекательных способов выровнять красный квадрат по центру черного прямоугольника является использование CSS-свойства transform.
Для начала, отпозиционируем красный квадрат при помощи свойств: position:absolute; top:50% left:50%
Как Вы догадываетесь, наш квадрат будет находиться не совсем в середине черного прямоугольника. Выровнять его чётко по центру поможет нам свойство transform: translateX(-50%) translateY(-50%). TranslateX(-50%) отодвинет элемент влево на расстояние в половину нашего элемента (благодаря этому свойству мы сможем отпозиционировать наш элемент даже не зная его ширину и высоту или если она у нас не постоянная). Соответственно, translateY(-50%) подвинет наш элемента на половину его высоты вверх. Благодаря такой простой манипуляции мы можем выровнять любой элемент по центру окна или другого элемента (!!! даже если элемент у нас без фиксированной ширины/высоты).
Результат Вы можете увидеть на скриншоте ниже:
