Вопрос: Как вертикально центрировать текст с помощью CSS?


У меня есть элемент div, который содержит текст, и я хочу выровнять содержимое этого центра по вертикали.

Вот мой стиль div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Каков наилучший способ сделать это?


1767


источник


Ответы:


Вы можете попробовать этот базовый подход:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Он работает только для одной строки текста, потому что мы устанавливаем высоту линии на ту же высоту, что и содержащий элемент окна.


Более универсальный подход

Это еще один способ выравнивания текста по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но для этого требуется контейнер с фиксированной высотой:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS просто ограничивает <div>, вертикально центрирует <span>установив <div>высота линии, равная ее высоте, и делает <span>встроенный блок с vertical-align: middle, Затем он устанавливает нормальную линию для строки <span>, поэтому его содержимое будет естественно вытекать внутри блока.


Имитация отображения таблицы

И вот еще один вариант, который может не работать на браузеры, которые не поддерживают display: tableа также display: table-cell(в основном просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), а HTML - тот же, что и второй пример:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Использование абсолютного позиционирования

Этот метод использует абсолютно позиционированный элемент, устанавливающий верхний, нижний, левый и правый значения 0. Он более подробно описан в статье в Smashing Magazine, Абсолютное горизонтальное и вертикальное центрирование в CSS ,


2400



Другой способ (еще не упомянутый здесь) Flexbox ,

Просто добавьте следующий код в контейнер элемент:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Демо-версия Flexbox 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

В качестве альтернативы вместо выравнивания содержимого с помощью контейнер , flexbox также может центрировать гибкий элемент с автоматическая маржа когда в гибком контейнере имеется только один гибкий элемент (как пример, приведенный в вопросе выше).

Поэтому, чтобы центрировать элемент гибкости как по горизонтали, так и по вертикали, просто установите его margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Все вышеизложенное относится к центрирующим элементам при их горизонтальные ряды , Это также поведение по умолчанию, потому что по умолчанию значение для flex-directionявляется row, Если, однако, гибкие элементы должны быть выложены в вертикальные столбцы , тогда flex-direction: columnдолжен быть установлен на контейнере, чтобы установить основную ось в качестве столбца, и дополнительно justify-contentа также align-itemsсвойства теперь работают наоборот с justify-content: centerцентрирования по вертикали и align-items: centerцентрирование по горизонтали)

flex-direction: columnдемонстрация

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые из его функций и получить синтаксис для максимальной поддержки браузера. flexyboxes

Кроме того, поддержка браузера в наши дни очень хороша: могу ли я использовать

Для кросс-браузерной совместимости для display: flexа также align-items, вы можете использовать следующее:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

933



Вы можете легко сделать это, добавив следующий фрагмент кода CSS:

display: table-cell;
vertical-align: middle;

Это означает, что ваш CSS, наконец, выглядит так:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


106



Для справки и для добавления более простого ответа:

Чистый CSS:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Или как SASS / SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Использовать в:

.class-to-center {
    @include vertical-align;
}

По блогам Sebastian Ekström Вертикальное выравнивание всего лишь с тремя строками CSS :

Этот метод может привести к размытию элементов из-за того, что элемент размещен на «полупикселе». Решением для этого является установка родительского элемента для сохранения-3d. Как и следующее:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Мы живем в 2015 году и Flex Box поддерживается каждым крупным современным браузером.

Это будет способ создания сайтов здесь.

Узнать его!


95



Все кредиты принадлежат владельцу этой ссылки @Sebastian Ekström Ссылка ; прочитайте пожалуйста. Смотрите это в действии codepen , Прочитав вышеприведенную статью, я также создал демонстрационная скрипка ,

Имея всего три строки CSS (исключая префиксы поставщиков), мы можем сделать это с помощью преобразования: translateY вертикально центрирует все, что захочет, даже если мы не знаем его высоты.

Преобразование свойства CSS обычно используется для элементов вращения и масштабирования, но с его функцией translateY мы можем теперь вертикально выравнивать элементы. Обычно это необходимо делать с абсолютным позиционированием или настройкой высоты линии, но для этого требуется либо знать высоту элемента, либо работать только с текстом в одной строке и т. Д.

Итак, для этого пишем:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Это все, что вам нужно. Это метод, аналогичный методу абсолютной позиции, но с ростом, что нам не нужно устанавливать высоту элемента или свойства position на родительском. Он работает прямо из коробки, даже в Internet Explorer 9 !

Чтобы сделать его еще более простым, мы можем написать его как mixin с его префиксами поставщиков.


48



Решения Flexboxes, которые были введены в CSS3, - это решение:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Заметка : Замените линию выше, которая отмечена как важная для одной из этих строк, если вы хотите центрировать текст:

1) Только вертикально:

margin: auto 0;

2) Только горизонтально:

margin: 0 auto;

ОБНОВИТЬ : Как я заметил, этот трюк также работает с сетками (display: grid).


21



Решение, принятое в качестве ответа, идеально подходит для использования line-heightтак же, как высота div, но это решение не работает отлично, когда текст обернут ИЛИ находится в двух строках.

Попробуйте это, если текст завернут или находится на нескольких строках внутри div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Дополнительную информацию см. В:


12



Flexible approach

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


10



You can also use below properties.

display: flex; 
align-content: center; 
justify-content : center;

8



Try this solution:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Built using CSS+.


8



You can use the following code snippet as the reference. It is working like a charm for me:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

The output of the above code snippet is as follow:

Enter image description here

Source code credit: How do I vertically center text with CSS? - Code Puran


8