Как я могу вертикально центрировать текст с помощью 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 также может центрировать a гибкий элемент С auto margin когда в контейнере flex есть только один flex-элемент (как пример, приведенный в предыдущем вопросе).

поэтому, чтобы центрировать элемент flex как по горизонтали, так и по вертикали, просто установите его с 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 is row. Если, однако, flex-элементы должны быть выложены в вертикальные столбцы, потом 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;
}

сообщение Себастьяна Экстрема в блоге вертикальное выравнивание всего с 3 линиями 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+.

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

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

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

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

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

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

иначе:

Не устанавливайте на 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 of the div to 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();
}

Я не уверен, что кто-то пошел в 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 для вас, чтобы играть на скрипке.

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

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

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>

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

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

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

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

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

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

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

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

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

[ctrv]{
    display:table !important;
}

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

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

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

попробуйте свойство 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>

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

.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 здесь.

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

пример:

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

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

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's standard dummy text ever since the 1500s
</div>

Я просто хотел бы расширить ответ от @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.

мне нужен был ряд кликабельных слонов, вертикально центрированных, но без использования таблицы, чтобы обойти некоторые странности Internet Explorer 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>

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

установить его в 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>

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

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

новые браузеры теперь поддерживают CSS

везде, где вы хотите вертикально центр стиль означает, что вы можете попробовать 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>

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>

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

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

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

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 в качестве поля на всех 4 сторонах, однако, приводит к тому, что противоположные поля равны и отображает наш дочерний div в центре Родительский div.

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