5 способов выравнивания HTML-элементов горизонтально и вертикально

Все, кто работает и изучают 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-канал и соц.сети 😉

Оставьте ответ

comment-avatar

*