Как вертикально центрировать текст с помощью 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>

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

1864
задан Irakli Lekishvili 15 янв. '12 в 0:25
источник поделиться
38 ответов
  • 1
  • 2

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

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, Absolute Горизонтальное и вертикальное центрирование в CSS.

2501
ответ дан Michiel van Oosterhout 15 янв. '12 в 0:26
источник поделиться

Другой способ (еще не упомянутый здесь) - 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;
990
ответ дан Danield 06 марта '14 в 11:15
источник поделиться

Вы можете легко сделать это, добавив следующий фрагмент кода 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>
113
ответ дан Ariful Islam 15 янв. '12 в 0:29
источник поделиться

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

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

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

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

100
ответ дан BAR 25 окт. '14 в 21:12
источник поделиться

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

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

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

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

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

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

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

51
ответ дан ankitd 11 авг. '14 в 14:59
источник поделиться

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

28
ответ дан MAChitgarha 13 дек. '16 в 23:09
источник поделиться

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

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

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

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

15
ответ дан Pranav Singh 29 июня '15 в 12:26
источник поделиться

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

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>
15
ответ дан Jürg 28 авг. '14 в 13:11
источник поделиться

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

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

11
ответ дан Marconi 01 дек. '15 в 21:06
источник поделиться

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

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

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

Enter image description here

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

9
ответ дан Akshay Pethani 28 мая '17 в 10:41
источник поделиться

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

display: flex; 
align-content: center; 
justify-content : center;
9
ответ дан satwik boorgula 15 апр. '16 в 11:28
источник поделиться

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

Не устанавливайте атрибут 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.

8
ответ дан Eseirt 28 сент. '14 в 21:07
источник поделиться

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

Объявите этот 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();
}
5
ответ дан Gothburz 27 окт. '15 в 20:04
источник поделиться

Я не уверен, что кто-то отправил маршрут 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 находится в!)

4
ответ дан Carles Alcolea 28 авг. '16 в 2:10
источник поделиться

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

Пример:

div{ display:flex; align-item:center;}
3
ответ дан Saravana priyan S 28 февр. '18 в 9:25
источник поделиться

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

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>
3
ответ дан Rafiqul Islam 23 нояб. '17 в 22:22
источник поделиться

Следующий код поместит 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 здесь.

3
ответ дан Caner 02 янв. '18 в 13:21
источник поделиться

Попробуйте свойство 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>
3
ответ дан sstauross 27 сент. '16 в 16:40
источник поделиться

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

.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>
3
ответ дан Manish Kumar 27 апр. '16 в 14:45
источник поделиться

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

[ctrv]{
    display:table !important;
}

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

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

<parent ctrv>  <ch1/>  <ch2/>   </parent>
3
ответ дан bortunac 07 марта '14 в 16:13
источник поделиться

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

Он может < использовать, когда #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 вы должны заменить :: на :.

3
ответ дан user 01 февр. '14 в 23:48
источник поделиться

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

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>
3
ответ дан Kumar 24 мая '18 в 14:01
источник поделиться

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

2
ответ дан mPrinC 22 февр. '15 в 16:59
источник поделиться

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

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

1
ответ дан Dave 30 окт. '14 в 13:09
источник поделиться

Установите его внутри 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>
1
ответ дан URL87 13 июля '16 в 18:31
источник поделиться
<!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>
0
ответ дан Nikit Barochiya 17 марта '17 в 8:00
источник поделиться

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

margin-top: 45%;

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

0
ответ дан Sam Alexander 02 сент. '14 в 17:10
источник поделиться

.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>
0
ответ дан antelove 22 сент. '17 в 15:56
источник поделиться

Чтобы центрировать поле в 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

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

Помимо поддержки 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>
0
ответ дан Will Hoskings 25 февр. '18 в 3:59
источник поделиться

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

.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>
0
ответ дан Mohammad Fathi MiMFa 20 авг. '18 в 10:50
источник поделиться
  • 1
  • 2

Другие вопросы по меткам