it-swarm.com.ru

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

У меня есть элемент div, который содержит текст, и я хочу выровнять содержимое этого 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>

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

2096
Irakli Lekishvili

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

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

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


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

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

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.

2691
Michiel van Oosterhout

Другой способ (еще не упомянутый здесь) - это 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 с auto margin, когда в контейнере 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 равно row. Если, однако, flex-элементы должны быть размещены в вертикальных столбцах , тогда flex-direction: column должен быть установлен на контейнере, чтобы установить главную ось как столбец и кроме того, теперь свойства justify-content и align-items работают наоборот с центрированием justify-content: center по вертикали и центрированием align-items: center по горизонтали)

flex-direction: column demo

.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;
1145
Danield

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

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

Чистый 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:

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

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

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

Это будет то, как веб-сайты сделаны с этого момента.

Узнайте это!

112
BAR

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

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

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

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

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

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

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

58
ankitd

Flexbox, которые были представлены в CSS 3, являются решением:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

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

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

margin: auto 0;

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

margin: 0 auto;

Как я заметил, этот прием работает и с сетками (display: grid).

38
MAChitgarha

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

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>
20
Jürg

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

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

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

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

17
Pranav Singh

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

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

13
Marco Allori

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

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

По-другому:

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

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

10
Eseirt

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

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

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

Enter image description here

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

9
Akshay Pethani

Вот еще один вариант использования flexbox.

HTML

<div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>

CSS

  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

Результат

Enter image description here

5
Long Tran

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

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>
5
Kumar

Я не уверен, что кто-то прошел путь 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% (даже Internet Explorer работает!)

5
Carles Alcolea

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

Объявите этот миксин:

@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

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

3
Caner

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

[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

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

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>
3
Rafiqul Islam

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

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

Пример:

div{ display:flex; align-item:center;}
3
Saravana priyan S

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

Его можно использовать, когда #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, вам нужно обернуть текстовое содержимое в дополнительный встроенный элемент и отредактировать #box::after, чтобы он соответствовал ему. (И, конечно, свойство content: должно быть удалено.)

Например, <div id="box"><span>TextContent</span></div>. В этом случае #box::after следует заменить на #box span.

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

3
user

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

.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

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

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

2
Dave

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

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

Вы можете использовать метод позиционирования в 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%);}

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

1
Sivaprakash D

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

.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>
1
Mohammad Fathi MiMFa
<!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
.element{position: relative;top: 50%;transform: translateY(-50%);}

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

0
Rahul

Новые браузеры теперь поддерживают функцию 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.

0
bruceceng

Везде, где вам нужен вертикальный центр, вы можете попробовать 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>
0
Ayyappan K

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

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

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

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;
}

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

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

К сожалению, вышеперечисленное не работает в Internet Explorer 7 и ниже, и, как и в предыдущем методе, содержимое внутри дочернего элемента div может стать слишком большим, что приведет к его скрытию.

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