Источник: StackOverflow
Каждый, кто работает с 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;
}Пример можно посмотреть здесь.
