Как я могу вертикально центрировать текст с помощью CSS? [Дубликат]

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

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

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

Flexbox demo 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 также может центрировать элемент flex с помощью автоматической разметки, когда в гибком контейнере есть только один гибкий элемент (например, пример, приведенный в вопросе выше).

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

Flexbox Демо 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>

Примечание: Все вышеизложенное относится к центрированию элементов при их укладке в горизонтальных рядах. Это также поведение по умолчанию, потому что по умолчанию значение 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

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

Для кросс-браузерной совместимости для 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;

Вы можете легко сделать это, добавив следующий фрагмент кода 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>

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

Чистый 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 поддерживается каждым крупным современным браузером.

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

Узнайте об этом!

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

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

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

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

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

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

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

Решения 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).

Гибкий подход

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>

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

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

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

Для получения дополнительной информации см.

• Вертикальный центр многострочного текста

• 6 Методы вертикального центрирования с помощью CSS

Попробуйте это решение:

.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>

Построено с использованием CSS+.

Вы можете использовать следующий фрагмент кода в качестве ссылки. Он работает как прелесть для меня:

<!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 my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

Вывод приведенного выше фрагмента кода выглядит следующим образом:

Кредит исходного кода: как мне вертикально центрировать текст с помощью CSS? - Код Пуран

Вы также можете использовать свойства ниже.

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

Другой способ:

Не устанавливайте атрибут height div, но вместо этого используйте padding: для достижения эффекта. Подобно линии-высоте, она работает только в том случае, если у вас есть одна строка текста. Хотя таким образом, если у вас больше контента, текст по-прежнему будет центрирован, но сам div будет немного больше.

Итак, вместо перехода с:

div {
  height:120px;
  line-height: 120px;
}

Вы можете сказать:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

Это установит верхний и нижний padding от div до 60px, а левый и правый padding равны нулю, делая высоту div 120px (плюс высота вашего шрифта) и размещение текста по вертикали в центре div.

Для всех ваших потребностей в вертикальном выравнивании!

Объявите этот Mixin:

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

Затем включите его в свой элемент:

.element{
    @include vertical-align();
}

Еще лучшая идея для этого. Вы тоже можете это сделать

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Я не уверен, что кто-то отправил маршрут writing-mode, но я думаю, что он решает проблему чисто и имеет широкую поддержку:

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Это, конечно, будет работать с любыми параметрами, которые вам нужны (помимо 100% родителя). Если вы раскомментируете пограничные линии, вам будет полезно ознакомиться с ним.

JSFiddle demo, чтобы вы могли играть.

Поддержка Caniuse: 85.22% + 6.26% = 91.48% (даже IE находится в!)

Я видел предыдущие ответы, и они будут работать только для этой ширины экрана (не реагируют). Для реагирования вы должны использовать flex.

Пример:

div{ display:flex; align-item:center;}

Следующий код поместит div в середину экрана независимо от размера экрана или div size:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Подробнее о flex здесь.

Попробуйте следующий код:

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

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s
</div>

Попробуйте свойство transform:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Очень простое и мощное решение для вертикального выравнивания центра:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}

<div class="outer-div">
  <span class="inner">No data available</span>
</div>

Простой и универсальный способ (как подход таблицы michielvoo):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

Использование этого атрибута (или эквивалентного класса) в родительском теге работает даже для многих дочерних элементов для выравнивания:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Для одной строки текста (или одного символа) вы можете использовать эту технику:

Он может < использовать, когда #box имеет нефиксированную, относительную высоту в%.

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Смотрите демонстрацию live в JsBin (проще редактировать CSS) или JsFiddle (проще изменить высоту кадра результата).

Если вы хотите разместить внутренний текст в HTML, а не в CSS, вам нужно обернуть текстовое содержимое в дополнительный встроенный элемент и отредактировать #box::after, чтобы он соответствовал ему. (И, конечно, свойство content: должно быть удалено.)
Например, фотографии <div id="box"><span>TextContent</span></div>
В этом случае #box::after следует заменить на #box span.

Для поддержки IE8 вы должны заменить :: на :.

Я просто хотел бы продлить ответ от @michielvoo, чтобы освободить потребность в высоте линии и дыхании высоты div. Это просто упрощенная версия:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

ПРИМЕЧАНИЕ. Закомментированная часть css необходима для fixed-height приложения div.

Установите его внутри button вместо div если вы не заботитесь о его небольшом визуальном 3D-эффекте.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}

<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

Мне понадобилась строка щелчкообразных слонов, вертикально центрированная, но без использования таблицы, чтобы обойти некоторую сеть. 9 странность.

В конце концов я нашел самый красивый CSS (для моих нужд), и это отлично с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}

<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Очевидно, что вам не нужны границы, но они могут помочь вам понять, как это работает.

Вы можете использовать метод позиционирования в CSS:

Проверьте результат здесь....

HTML:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

Надеюсь, вы тоже используете этот метод.

Это легко и очень коротко:

.block {
  display: table-row;
  vertical-align: middle;
}

.tile {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 100px;
}

<div class="body">
  <span class="tile">
    Hello middle world! :)
  </span>
</div>

Абсолютное позиционирование и растяжка

Как и выше, этот метод начинается с установки позиционирования на родительский и дочерний элементы как относительные и абсолютные соответственно. Оттуда все меняется.

В приведенном ниже коде Ive снова использовал этот метод для центрирования ребенка как по горизонтали, так и по вертикали, хотя вы можете использовать метод только для вертикального центрирования.

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Идея этого метода состоит в том, чтобы попытаться заставить дочерний элемент растянуться на все 4 ребра, установив верхние, нижние, правые и левые значения равными 0. Поскольку наш дочерний элемент меньше наших родительских элементов, он не может достичь всех 4 ребер,

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

К сожалению, вышеупомянутое не работает в IE7 и ниже, и, как и предыдущий метод, содержимое внутри дочернего div может увеличиваться слишком сильно, заставляя его скрываться.

Чтобы центрировать поле в CSS, вы можете либо использовать flexbox, margin или position.

Margin

Вы можете использовать свойство margin для центровки элементов контейнера. Чтобы помочь решить, использовать ли пробел или маржу, ознакомьтесь с этим вопросом.

.box {
  border: 2px solid orange;
  padding: 5px;
}

.text {
  margin: auto;
  width: 90%;
}

<div class="box">
  <p class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

Помимо поддержки flexbox, причина его использования - это легкость, с которой мы можем центрировать элементы как по горизонтали, так и по вертикали.

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  border:2px solid orange;
}

.text {
  max-width: 50%;
}

.text-center {
  align-self: flex-start;
}

<div class="box">
  <div class="text text-center">Lorem Ipsum</div>
</div>

Позиция

Вы также можете использовать свойство position для центрирования таких элементов. Это дает хороший, ориентированный взгляд на текст.

.box {
  border: 2px solid orange;
  max-width: 50%;
  width: 50%;
  padding: 20px;
}

.text {
  position: relative;
  left: 2%;
  top: 2%;
  right: 2%;
}

<div class="box">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>

Попробуйте следующее:

.text-center {
		  height: 200px;
		  text-align: center;
		  border: 2px dotted #ee944d;
		  display: table-cell;
		  vertical-align: middle;
		}

<div class="text-center">
	  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</div>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>

Везде, где вы хотите вертикальный стиль центра, вы можете попробовать display:table-cell и vertical-align:middle.

Пример:

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

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Новые браузеры теперь поддерживают функцию CSS calc. Если вы настроите таргетинг на эти браузеры, вам может понадобиться сделать что-то вроде этого:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

Ключ состоит в том, чтобы использовать style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" внутри абсолютного или относительно расположенного родительского div.

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

Добавьте этот небольшой код в свойство CSS вашего элемента. Это превосходно. Попробуйте!

Вот рабочий код:

body{
  margin:0;
}
div {
  height: 80px;
  background: #171717;
  font-size: 24px;
  text-align: center;
  font-style: normal;
  color: #FFF;
  margin-top: 18px;
  margin-left: 4px;
  line-height: 80px;
}

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Align text vertically center in div using CSS</title>
  </head>

  <body>
    <div>
      <span><a class="btn" href="http://ownanswers.com/"
               rel="dofollow">OwnAnswers.com</a>
      </span>
      For asking your questions, visit this site.
    </div>
  </body>
</html>

Результат

Это отлично работает.

Вы должны использовать стиль таблицы для выравнивания div и центра для содержимого.

Лучше, проще, отзывчивый подход - установить margin-top в CSS примерно на 45%:

margin-top: 45%;

Возможно, вам придется играть с этим номером, но он будет находиться в центре окружающего div.

.text{
   background:#ccc;  
   position:relative; 
   float:left; 
   text-align:center; 
   width:400px; 
   line-height:80px; 
   font-size:24px; 
   color:#000; 
   float:left;
 }