Каждый, кто работает с HTML/CSS, рано или поздно сталкивается с проблемой вертикального и горизонтального выравнивания элемента. Чтобы вы лишний раз не гуглили и не находили много разных вариантов, мы собрали здесь несколько самых популярных.
Способ 1
В поддерживаемых браузерах можно использовать top: 50%
/left: 50%
в сочетании с translateX(-50%) translateY(-50%)
для динамического горизонтального/вертикального центрирования элемента:
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Пример можно посмотреть здесь, а тут можно увидеть полноэкранную версию.
Способ 2
В поддерживаемых браузерах также можно присвоить свойству display
значение flex
и использовать align-items: center
с justify-content: center
для вертикального и горизонтального центрирования соответственно. Главное, не забудьте добавить вендорные префиксы (как в примере), чтобы этот приём сработал в большем количестве браузеров:
html, body, .container {
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
Вот пример и его полноэкранная версия.
Способ 3
В некоторых случаях вам будет нужно убедиться, что высота элемента html
/body
равна 100%.
Для вертикального выравнивания присвойте свойствам width
и height
родительского элемента значение 100%
и добавьте display: table
. В дочернем элементе измените значение display
на table-cell
и добавьте vertical-align: middle
.
Для горизонтального выравнивания текста и других inline-элементов можно либо использовать text-align: center
, либо margin: 0 auto
, если вы имеете дело с блоковым элементом. Это должно сработать в большинстве браузеров:
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
Примеры доступны здесь и здесь.
Способ 4
Здесь предполагается, что высота текста заранее известна. В этом случае, например, 18px
. Теперь нужно всего лишь присвоить свойству position
элемента значение absolute
и подвинуть сверху на 50%
относительно родительского элемента. Наконец, свойству margin-top
нужно присвоить отрицательное значение, равное половине высоты элемента:
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
За примерами сюда и сюда. Этот вариант должен работать во всех поддерживаемых браузерах.
Способ 5
В некоторых случаях у родительского элемента фиксированная высота. Для вертикального выравнивания нужно всего лишь присвоить свойству line-height
дочернего элемента высоту родительского. Хотя в некоторых случаях это будет работать, такой способ не стоит использовать, так как несколько строк текста всё испортят:
.parent {
height: 200px;
width: 400px;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
Пример можно посмотреть здесь.
Источник: StackOverflow