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


1186

Я пытаюсь найти наиболее эффективный способ выравнивания текста с 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>


4
Вот пример по этому адресу: http://css-tricks.com/vertically-center-multi-lined-text/ .
cguzel



Ответы:


782

Вертикальное центрирование в 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>


3
Первая ссылка лучше, я думаю, даже если она выглядит сложной, потому что вторая ссылка использует только одну строку текста или изображение, высота которого вам известна. Что делать, если у вас есть 2 или 3 строки текста, или если вы не знаете высоту вашего текста, потому что он меняется. Как это будет работать с высотой строки? Итак, подведем итоги. Я протестировал первую версию, и она работает на IE, Firefox и CHROME.
Рауль

954
Я не понимаю, почему мы должны подрывать с этим материалом? Это 21 век! почему они просто не включают одну чертову опцию для выравнивания чертового текста по вертикали в css ... например так: центрирование контента: и то, и другое, или вертикально, или по горизонтали. просто невероятно, что технологии, используемые годами, настолько глупы.
Александр.

34
@Flextra: Вот почему люди все еще используют таблицы для разметки сетки. Вертикальное выравнивание (или что-либо с высотой и динамическими данными) может быть сложной задачей с чистым CSS. Вы должны быть готовы сделать странные хаки, подобные этой (в некоторой степени побеждать идею «отделить контент от макета»), или сделать несколько проходов рендеринга и использовать нестатические таблицы. У меня никогда не было жалоб от конечных пользователей, tableнесмотря на то, что я постоянно разбиваю сердца фанатов CSS. Большинство из них проектируют только простые блоги и статические сайты. Некоторые из нас создают программное обеспечение для бизнеса и нуждаются в плотном отображении данных, а наши пользователи больше заботятся о функциональности.
ничего лишнего

6
Ага. Не поймите меня неправильно, если я создаю «сайт», я использую Lean HTML и предпочитаю чистый CSS, но я не знаю, сколько раз я боролся с подкладкой в ​​течение нескольких часов, когда я просто сказал «F it» и использовал table, Сейчас дела обстоят лучше, но некоторые из нас, кто создает бизнес-веб-приложения, должны поддерживать старые браузеры (IE6 все еще используется на некоторых клиентах!), В то время как люди, которые создают блоги, могут жить в облаках и притворяться, что у всех в мире есть быстрое соединение, новый компьютер и последняя версия браузера X с CSS 3 и т. д. Пример: некоторые плагины Jira используют однострочные таблицы для разметки (или в любом случае)
ничего лишнего

61
Весьма смешно, что таблицы воспринимаются как некий старомодный хак, который может использовать только новичок, и здесь мы используем «display: table-cell» в DIV в качестве гораздо более хакерского обходного пути.
Desty

744

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

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

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

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


368
Я полагаю, что это допустимо, только если у вас есть одна строка текста в div.
WEFX

49
Безусловно, в вашем тексте будет сумасшедший межстрочный интервал, если он будет длиться более 1 строки.
Дэвид

1
@BobChatting, да, это так. Смотрите мой ответ для решения, которое позволяет несколько строк текста.
Адам Томат

2
Высота строки распространяется на всех детей
KVM

4
не работает с процентами: высота: 100%; высота строки: 100%
albanx

477

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

С http://howtocenterincss.com/ :

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

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

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

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

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>


2
Нет проблем. Я все еще предпочитаю использовать, height: x; line-height: x;но чаще всего мне не нужно несколько строк текста. Вот почему я люблю это решение. Простой, многоразовый, кросс-браузерный, без js и требует лишь немного дополнительной наценки.
Адам Томат

Если текст больше поля, он будет переполнен. Я пробовал различные способы предотвращения переполнения, но все они, казалось бы, конфликтуют с отображением таблиц и ячеек таблицы. Как только я ограничиваю переполнение, вертикальное центрирование перестает работать. jsfiddle.net/2HHLE Есть идеи?
Томас Дэвид Бейкер

Чтобы ответить на мой собственный вопрос, если вы поместите div (ы) table / table-cell в другой div с фиксированной шириной / высотой и переполнением: скрытый, который сделает свое дело. Я написал это на bluebones.net/2013/03/…
Томас Дэвид Бейкер

2
@ThomasDavidBaker, другое решение, если вам нужно, чтобы они были динамическими, это установить высоту 100%. Вот jsfiddle , в основном просто поменяли height: 100px;на height: 100%;для как liи для .outerContainer.
Адам Томат

2
Не хочу быть здесь сборщиком носа, но во втором решении от нуля. В CSS есть опечатка "- wekbit -transform : translateY (-50%);" Тем не менее, большое спасибо! Отличное решение!
Gnagy

186

Это легко с 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>

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


Коротко и мило ... так и должно быть, чтобы сделать что-то так просто. Работает на IE 11, Chrome и Firefox ... достаточно хорошо для меня
всплеск

Этот ответ работает с позиционированием текста внутри посторонних объектов в SVG. Спасибо!

1
Я верю: Flex - средство от всего!
ДенисКолодин

1
text-align: centerтоже необходимо, потому что длинная ширина текста заполнена и будет выровнена по левому краю
ДенисКолодин

У меня всегда были проблемы с этим, и я абсолютно ненавижу ответ об увеличении высоты строки. Это сработало очень хорошо.
Джед Линч

109

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

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-в моем случае), чтобы это работало для вашего браузера.

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


3
Я получил более надежные результаты с position: absolute;- Спасибо! NB. Возможно, вы захотите включить, -ms-transformили IE добавит что-то еще
Уилф

Плункер предлагает поставить -web-kit-transformраньше transform. Возможно, добавление -ms-transformможет решить проблему @ ToniMichelCaubet.
sakovias

39

Вы можете сделать это, установив отображение '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 .

Введите описание изображения здесь


2
Отличная идея! display: table-cell имеет другие эффекты, но если с вами все в порядке, это хорошее решение
Брайан Лоу

Также важно добавить высоту элемента.
Элан Перах

К сожалению, переполнение: скрытый не работает на дисплее: ячейка таблицы
TheJeff

32

В наши дни (нам больше не нужен 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>


2
@Imray он в основном добавляет элемент встроенного блока шириной 0px рядом с текстом (псевдо: before). Тем не менее, этот искусственный блок имеет 100% высоты, что является хитростью. Поскольку блок и текст выровнены по v, он отображается так, как задумано.
Дан Х

1
лучший ответ, чистое решение, поддерживается IE8
Rocco

Когда текст переносится, у вас могут возникнуть проблемы с этим. Я исправил это, добавив следующее к вложенному элементу: width: 95%; vertical-align: middle;
trgraglia

если текст слишком длинный, он не работает. У тебя есть решение? jsfiddle.net/cyxuy95q
бета

Как предложено в предыдущем комментарии к вашему, установите максимальную ширину 95% jsfiddle.net/cyxuy95q/1
Тони Мишель Коубет

28

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

display: flex;
align-items: center;

1
Мне нравится этот - простой и работает в современных браузерах
Каспер Сковгаард

8

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

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

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


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

Работал как брелок при вертикальном выравнивании: средний; а все остальное не удалось.
Чивда


6

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

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


5

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

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

5

Это самое чистое решение, которое я нашел (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


4

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

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

4

Согласно ответу Адама Томата был подготовлен пример 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 */
}

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


4

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

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

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

4

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

3

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

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» для выравнивания по левому краю.


2

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

2

Используя 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>


1

Это еще один вариант 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


1

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

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>(который является шрифтом).


0

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

Но у меня есть <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/


1
Приятно, потому что это самое простое решение. Недостатком является то, что он работает только для однострочного текста, см. Пример с более длинным текстом. jsfiddle.net/6sWfw
Томас Тинтера

0

Вы можете использовать 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>


0

Использование сетки 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>


0

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

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


6
Таблицы предназначены только для работы с табличными данными. Они никогда не должны использоваться для устранения проблем макета.
Micros

3
Хорошая вещь о таблицах, хотя, они всегда последовательны - CSS интерпретируется так по-разному, а использование вложенных DIV просто для того, чтобы сделать что-то простое, добавляет дополнительный HTML (и путаницу). CSS все еще в значительной степени
ущербен

4
Да, к сожалению, это ЕДИНСТВЕННЫЙ единственный надежный способ вертикально выровнять (неизвестный) текст в блоке. Почему боги CSS так ненавидят доблесть? (ВСЕ браузер МОЖЕТ делать это последовательно - но только в ячейках таблицы)
T4NK3R

-1

Есть несколько хитростей для отображения содержимого или изображения в центре 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&nbsp;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>

-2

CSS:

.vertical {
   display: table-caption;
}

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


-2

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

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.