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

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

html
Denis Stelmakh

Источник: 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;
}

Пример можно посмотреть здесь.

Вакансии в тему: