Все, кто работает и изучают HTML/CSS, всегда сталкиваются с такой проблемой как, вертикальное или горизонтальное выравнивание элемента. Так как google предлагает нам больше количество вариантов решения данного вопроса, я решил, что было бы не плохо, самое популярные варианты собрать в одном месте.
Способ 1
Если вам известна высота родительского элемента, и она фиксированная, то, для вертикального выравнивания вам нужно дочернему элементу присвоить свойство line-height которое будет равняться высоте родительского элемента. В некоторых случаях это будет полезно, но использовать данный метод я не советую, т.к. если будет разная величина строк, может все испортиться.
Пример данного способа:
Способ 2
Для выравнивания элементов можно использовать top: 50%/left: 50% в сочетании с translateX(-50%) translateY(-50%) для того, чтобы можно было динамически горизонтально/вертикально центрировать элементы.
Пример данного способа:
Способ 3
Предположим, что нам известна высота текста или блока. Все что нам нужно сделать, это всего лишь присвоить дочернему элементу position:absolute и сверху подвинуть его на 50%, относительно родительского, а также нужно сделать отрицательный отступ от верха, на половину высоты элемента.
Пример данного способа:
Способ 4
Для выравнивания элементов можно присвоить свойство display:flex и использовать align-items: center и justify-content: center для вертикального и горизонтального центрирования.
Пример данного способа:
Способ 5
В некоторых случаях вам будет нужно убедиться, что высота элемента html/body равна 100%.
Для вертикального выравнивания присвойте свойствам width и height родительского элемента значение 100% и добавьте display: table. В дочернем элементе измените значение display на table-cell и добавьте vertical-align: middle.
Для горизонтального выравнивания текста и других inline-элементов можно либо использовать text-align: center, либо margin: 0 auto, если вы имеете дело с блоковым элементом.
Пример данного способа:
Если вы знаете еще какие-нибудь способы центрирования HTML-элементов или у вас просто остались вопросы, пишите в комментарии.
Чтобы не пропустить выход новых статей, подписывайтесь на наш telegram-канал и соц.сети 😉
Оставьте ответ