Как выровнять текст по вертикали в div?

Я пытаюсь найти наиболее эффективный способ выравнивания текста с div. Я пробовал несколько вещей, и ни одна из них не работает.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Вертикальное центрирование в CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Краткое содержание статьи:

Для браузера CSS 2 можно использовать display:table/ display:table-cellдля центрирования контента.

Образец также доступен на JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Можно объединить хаки для старых браузеров (Internet Explorer 6/7) в стили с помощью #скрытия стилей от более новых браузеров:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Вам нужно добавить line-heightатрибут, и этот атрибут должен соответствовать высоте div. В твоем случае:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

Фактически, вы могли бы удалить heightатрибут вообще.

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

Вот отличный ресурс

С http://howtocenterincss.com/ :

Центрирование в CSS - это боль в заднице. Кажется, существует множество способов сделать это, в зависимости от множества факторов. Это объединяет их и дает вам код, необходимый для каждой ситуации.

Использование Flexbox

В соответствии с последним обновлением этой статьи, существует гораздо более простой способ центрирования чего-либо с помощью Flexbox. Flexbox не поддерживается в Internet Explorer 9 и ниже .

Вот несколько замечательных ресурсов:

• Руководство по Flexbox
• Центрирующие элементы с Flexbox
• Синтаксис Internet Explorer 10 для Flexbox
• Поддержка Flexbox

JSFiddle с браузерными префиксами

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Другое решение

Это от нуля и позволяет вам что угодно с шестью строками CSS

Этот метод не поддерживается в Internet Explorer 8 и ниже .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Предыдущий ответ

Простой и кросс-браузерный подход, полезный, поскольку ссылки в отмеченном ответе немного устарели.

Как вертикально и горизонтально центрировать текст как в неупорядоченном списке, так и в div, не прибегая к высоте строк JavaScript или CSS . Независимо от того, сколько у вас текста, вам не придется применять какие-либо специальные классы к определенным спискам или элементам div (код одинаков для каждого). Это работает во всех основных браузерах, включая Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera и Safari. Существуют две специальные таблицы стилей (одна для Internet Explorer 7 и другая для Internet Explorer 6), чтобы помочь им в этом из-за ограничений CSS, которых нет в современных браузерах.

Энди Ховард - Как вертикально и горизонтально центрировать текст в неупорядоченном списке или в div

Поскольку мне не очень нравился Internet Explorer 7/6 для последнего проекта, над которым я работал, я использовал слегка урезанную версию (то есть удалил то, что заставляло его работать в Internet Explorer 7 и 6). Это может быть полезно для кого-то еще ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Это легко с display: flex. При использовании следующего метода текст в divбудет центрирован вертикально:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

А если хотите, горизонтальный

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Вы должны увидеть нужную вам версию браузера; в старых версиях код не работает.

Я легко использую следующее для вертикального центрирования случайных элементов:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Это центрирует текст в моем divточном вертикальном центре 200 пикселей высотой div. Обратите внимание, что вам может понадобиться использовать префикс браузера (как -webkit-в моем случае), чтобы это работало для вашего браузера.

Это работает не только для текста, но и для других элементов.

Вы можете сделать это, установив отображение 'table-cell' и применив vertical-align: middle;:

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

Однако это не поддерживается всеми версиями Internet Explorer в соответствии с этим отрывком, который я скопировал с http://www.w3schools.com/cssref/pr_class_display.asp без разрешения.

Замечания: . Значения «inline-table», «table», «table-caption», «table-cell», «table-column», «table-column-group», «table-row», «table-row» -группа "и" наследовать "не поддерживаются Internet Explorer 7 и более ранними версиями. Internet Explorer 8 требует! DOCTYPE. Internet Explorer 9 поддерживает значения.

В следующей таблице приведены допустимые отображаемые значения также по адресу http://www.w3schools.com/cssref/pr_class_display.asp .

В наши дни (нам больше не нужен Internet Explorer 6-7-8), я бы просто использовал CSS display: tableдля этой проблемы (или display: flex).

Для старых браузеров:

Таблица:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Flex:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

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

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

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

display: flex;
align-items: center;

Вот решение, которое лучше всего подходит для одной строки текста.

Он также может работать с многострочным текстом с некоторыми изменениями, если число строк известно.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Вот JSFiddle .

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Вы можете выровнять текст по центру внутри div, используя Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

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

Вы можете узнать больше об этом в Полном руководстве по Flexbox .

Проверьте это простое решение:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Есть более простой способ выровнять содержимое по вертикали, не прибегая к таблице / ячейке таблицы:

http://jsfiddle.net/bBW5w/1/

В него я добавил невидимый (width = 0) div, который принимает всю высоту контейнера.

Кажется, работает в Internet Explorer и Firefox (последние версии). Я не проверял с другими браузерами

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

И конечно же CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Это самое чистое решение, которое я нашел (Internet Explorer 9+), и добавляет исправление для проблемы «off by .5 pixel», используя transform-styleдругие опущенные ответы.

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

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

Источник: Вертикально выровняйте что-нибудь всего с 3 строками CSS

Простое решение для элемента незнания значений:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Согласно ответу Адама Томата был подготовлен пример JSFiddle для выравнивания текста в div :

<div class="cells-block">    
    text<br/>in the block   
</div>

используя display: flex в CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

с другим примером и несколькими объяснениями в блоге .

Авто наценки на элемент сетки.

Аналогично Flexbox, применение авто на полях к элементу сетки центрирует его по обеим осям:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexbox отлично сработал для меня, центрируя несколько элементов внутри родительского div по горизонтали и вертикали.

HTML-код:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-код:
код ниже размещает все элементы внутри parent-div в столбце, центрируя элементы по горизонтали и вертикали. Я использовал child-div, чтобы сохранить два элемента Anchor на одной строке (строке). Без дочернего элемента div все три элемента (Anchor, Anchor & Paragraph) располагаются внутри столбца parent-div друг над другом. Здесь только child-div укладывается в столбец parent-div.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Использование:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

С помощью этого трюка вы можете выровнять что угодно, если вы не хотите, чтобы это было по центру, добавьте «left: 0» для выравнивания по левому краю.

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Используя flex, будьте осторожны с различиями в рендеринге браузеров.

Это хорошо работает как для Chrome, так и для Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Сравните с этим, который работает только с Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Это еще один вариант divиспользования divшаблона calc()в CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Это работает, потому что:

• position:absoluteдля точного размещения в divпределахdiv
• мы знаем высоту внутреннего, divпотому что мы установили его на 20px.
• calc(50% - 10px)на 50% - половина высоты для центрирования внутреннегоdiv

Это прекрасно работает:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

пререкаться

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Без и с тегом изображения <mat-icon>(который является шрифтом).

Хм, очевидно, есть много способов решить это.

Но у меня есть <div>абсолютно позиционированный height:100%(на самом деле top:0;bottom:0и фиксированной ширины) и display:table-cellпросто не работал, чтобы центрировать текст по вертикали. Мое решение действительно требовало внутреннего элемента span, но я вижу, что многие другие решения также нуждаются в этом, поэтому я мог бы добавить его:

Мой контейнер - это, .labelи я хочу, чтобы число было по центру. Я сделал это, top:50%установив абсолютно на и установивline-height:0

<div class="label"><span>1.</span></div>

И CSS выглядит следующим образом:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Посмотрите это в действии: http://jsfiddle.net/jcward/7gMLx/

Вы можете использовать CSS flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Использование сетки CSS сделало это для меня:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Попробуйте встроить элемент таблицы.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Есть несколько хитростей для отображения содержимого или изображения в центре div. Некоторые из ответов действительно хороши, и я полностью согласен с ними.

Абсолютное горизонтальное и вертикальное центрирование в CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Существует более 10 методик с примерами . Теперь вам решать, что вы предпочитаете.

Без сомнения, display:table; display:table-Cellэто лучший трюк.

Вот некоторые хорошие уловки:

Трюк 1 - с помощью display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

CSS код

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Трюк 2 - Используя display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

Код CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Трюк 3 - Используя position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

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

Если вам нужно использовать со min-heightсвойством, вы должны добавить этот CSS:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}