CSS центр текста (по горизонтали и вертикали) внутри блока div


862

У меня есть divнабор display:block( 90px heightи width), и у меня есть текст внутри.

Мне нужно, чтобы текст был выровнен по центру как по вертикали, так и по горизонтали.

Я пытался text-align:center, но это не делает горизонтальную часть, поэтому я попытался vertical-align:middle, но это не сработало.

Любые идеи?


25
Вы имеете в виду text-align:center, не делает "вертикальную часть"?
неполярность

2
Я наконец-то нашел решение, которое работает с относительными размерами и без фиксированной высоты: stackoverflow.com/a/16195362/1301331
Cirrus

3
Очень важно знать, как центрировать / центрировать элементы. Приведенный ниже документ дал очень четкую картину. w3.org/Style/Examples/007/center.en.html
shibualexis

Вот два простых метода для центрирования объектов внутри элементов div, по вертикали, по горизонтали или в обоих (чистый CSS): stackoverflow.com/a/31977476/3597276
Майкл Бенджамин,

Ответы:


1385

Если это одна строка текста и / или изображения, то это легко сделать. Просто используйте:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Вот и все. Если это может быть несколько строк, то это несколько сложнее. Но есть решения на http://pmob.co.uk/ . Ищите «вертикальное выравнивание».

Так как они имеют тенденцию быть хаки или добавления сложных div-ов ... Я обычно использую таблицу с одной ячейкой, чтобы сделать это ... чтобы сделать это как можно более простым.


Обновление до 2020 года:

Если вам не нужно, чтобы он работал в более ранних браузерах, таких как Internet Explorer 10, вы можете использовать flexbox. Он широко поддерживается всеми основными браузерами . В основном, контейнер должен быть указан как гибкий контейнер с центрированием вдоль его главной и поперечной оси:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Чтобы указать фиксированную ширину для дочернего элемента, которая называется «гибкий элемент»:

#content {
  flex: 0 0 120px;
}

Пример: http://jsfiddle.net/2woqsef1/1/

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

Пример: http://jsfiddle.net/2woqsef1/2/

Приведенные выше примеры были протестированы в основных браузерах, включая MS Edge и Internet Explorer 11.

Одно техническое замечание, если вам нужно его настроить: внутри элемента flex, поскольку этот элемент flex не является самим контейнером flex, старый не-flexbox-способ CSS работает должным образом. Однако, если вы добавите дополнительный гибкий элемент к текущему гибкому контейнеру, два гибких элемента будут расположены горизонтально. Чтобы сделать их вертикально расположенными, добавьте flex-direction: column;в гибкий контейнер. Вот как это работает между контейнером flex и его непосредственными дочерними элементами.

Существует альтернативный метод центрирования: не указывать centerраспределение по главной и поперечной оси для гибкого контейнера, а вместо этого указать margin: autoна гибком элементе, чтобы он занимал все дополнительное пространство во всех четырех направлениях и равномерно распределенные поля сделает гибкий элемент по центру во всех направлениях. Это работает за исключением случаев, когда есть несколько элементов flex. Кроме того, этот метод работает на MS Edge, но не на Internet Explorer 11.


Обновление на 2016/2017:

С ним чаще можно справиться transform, и он хорошо работает даже в старых браузерах, таких как Internet Explorer 10 и Internet Explorer 11. Он может поддерживать несколько строк текста:

position: relative;
top: 50%;
transform: translateY(-50%);

Пример: https://jsfiddle.net/wb8u02kL/1/

Чтобы уменьшить ширину:

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

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Пример: https://jsfiddle.net/wb8u02kL/2/

Если требуется поддержка Internet Explorer 10, то flexbox не будет работать, а метод выше и line-heightметод будут работать. В противном случае, flexbox сделает эту работу.


58
Там есть display: table-cellсвойство для этого, к вашему сведению. Его использование заставляет элемент вести себя как ячейка таблицы и позволяетvertical-align: middle;
Shauna

1
Если вы используете font:их, убедитесь, что вы поставили их выше line-высоты`.
user1135469

4
Это может работать не так, как задумано, если div содержит элементы <br/>.
Мартин Мизер

7
Что если мой рост в%?
CandleCoder

1
при таком подходе текст должен быть в одной строке, иначе у вас будет вторая строка на 90px ниже первой.
Томаш Муларчик

454

Общие методы по состоянию на 2014 год:


  • Подход 1 - transform translateX/ translateY:

    Пример здесь / Пример полного экрана

    В поддерживаемых браузерах (большинство из них) вы можете использовать top: 50%/ left: 50%в комбинации с translateX(-50%) translateY(-50%)для динамического вертикального / горизонтального центрирования элемента.

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

  • Подход 2 - метод Flexbox:

    Пример здесь / Пример полного экрана

    В поддерживаемых браузерах установите displayцелевой элемент flexи используйте его align-items: centerдля вертикального и justify-content: centerгоризонтального центрирования. Только не забудьте добавить префиксы поставщиков для дополнительной поддержки браузера ( см. Пример ).

    html, body, .container {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

  • Подход 3 - table-cell/ vertical-align: middle:

    Пример здесь / Пример полного экрана

    В некоторых случаях вам необходимо убедиться, что высота элемента html/ bodyустановлена ​​на 100%.

    Для вертикального выравнивания установите родительский элемент width/ heightв 100%и добавьте display: table. Тогда для дочернего элемента, изменить displayк table-cellи добавить vertical-align: middle.

    Для горизонтального центрирования вы можете добавить text-align: centerк центру текст и любые другие inlineдочерние элементы. В качестве альтернативы вы можете использовать margin: 0 autoдопущение, что элемент является blockуровнем.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }

  • Подход 4 - Абсолютно позиционируется 50%сверху со смещением:

    Пример здесь / Пример полного экрана

    Такой подход предполагает , что текст имеет известную высоту - в этом случае 18px. Просто расположите элемент 50%сверху, относительно родительского элемента. Используйте отрицательное margin-topзначение, равное половине известной высоты элемента, в данном случае - -9px.

    html, body, .container {
        height: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .container > p {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -9px;
    }

  • Подход 5 - line-heightМетод (наименее гибкий - не рекомендуется):

    Пример здесь

    В некоторых случаях родительский элемент будет иметь фиксированную высоту. Для вертикального центрирования все, что вам нужно сделать, это установить line-heightзначение дочернего элемента, равное фиксированной высоте родительского элемента.

    Хотя в некоторых случаях это решение будет работать, стоит отметить, что оно не будет работать при наличии нескольких строк текста - например, так .

    .parent {
        height: 200px;
        width: 400px;
        text-align: center;
    }
    .parent > .child {
        line-height: 200px;
    }

Методы 4 и 5 не самые надежные. Перейти с одним из первых 3.


8
+1 за исчерпывающий ответ. Лично я предпочитаю первый метод, потому что метод 2 имеет меньшую поддержку, и мне нравится избегать table-cellкак можно больше.
Гарри

4
2. Метод Flexbox является единственным, который работает, если родительский элемент .containers является абсолютным. 1. метод заставляет родителя сокращаться из-за абсолютного .container и 3. метод просто не работал, в то время как .parent имел абсолютную позицию.
Янис Грузис

Flex работал для вертикального центрирования многострочного текста в браузере Ipad Chrome.
Боб

7
Метод Flexbox - лучший из всех.
Rorykoehler

Подход 1 не работает для меня, когда прокручивается.
Вишал Гулати

78

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

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Взято из краткого совета: самый простой способ центрировать элементы по вертикали и горизонтали


4
Осторожно: не будет работать в IE. Вам нужно будет добавить display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center.
Флориан Вендельборн

добавить text-align:centerдля inline-элементов .. таких как текст.

Обратите внимание, что flexbox теперь имеет хотя бы частичную поддержку в IE 10 и 11 и работает для 97% пользователей согласно caniuse . Я не думаю, что поддержка браузера является аргументом против этого больше.
Феликс Ганьон-Гренье

28

Добавьте строку display: table-cell;в ваш контент CSS для этого div.

Только ячейки таблицы поддерживают vertical-align: middle;, но вы можете дать определение [table-cell] div ...

Живой пример здесь: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

1
Это не работает, если positionявляется абсолютным или фиксированным. См .: jsfiddle.net/tH2cc/1636
Аарон Мейсон

16

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

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Смотрите это в действии здесь: https://jsfiddle.net/yp1gusn7/


3
^ почему стандарты важны
Флориан Вендельборн

16

Вы можете попробовать очень простой код для этого:

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

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="box">
  Lorem
</div>

Ссылка Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr


Работает даже для текста в несколько строк, +1!
Jeroen Bellemans

16

Передайте этот класс CSS целевому элементу <div>:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}
<div class="centered">This text is centered horizontally and vertically</div>


2
Вы действительно должны, и CSS сетка, а также :) Я рекомендую этот учебный план .
Амину Кано

9

Вы можете использовать flexсвойство у родителя div и добавить margin:autoсвойство к дочерним элементам:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Вы можете увидеть больше вариантов flexздесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


8

Подход 1

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

Подход 2

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>

Подход 3

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>


4
<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

4
# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

6
Как именно это отличается от других опубликованных ответов?
Джош Крозье

3

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


3
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
Sudheesh Singanamalla

1

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>


1

Это работает для меня (проверено ОК!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Вы можете выбрать другие значения, чем 50%. Например, 25% от центра в 25% от родителей.


1
<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Почему два ответа?
Питер Мортенсен

1

Вы можете попробовать следующие методы:

  1. Если у вас есть одно слово или предложение в одну строку, то следующий код может помочь.

    Поместите текст внутри тега div и присвойте ему идентификатор. Определите следующие свойства для этого идентификатора.

    id-name {
      height: 90px;
      line-height: 90px;
      text-align: center;
      border: 2px dashed red;
    }

    Примечание. Убедитесь, что свойство line-height соответствует высоте деления.

    Образ

    Но если содержимое содержит более одного слова или строки, это не работает. Также будут случаи, когда вы не сможете указать размер деления в px или% (когда деление очень маленькое, и вы хотите, чтобы содержимое было точно посередине).

  2. Чтобы решить эту проблему, мы можем попробовать следующую комбинацию свойств.

    id-name {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px dashed red;
    }

    Образ

    Эти 3 строки кода устанавливают содержимое точно в середине раздела (независимо от размера дисплея). «ALIGN-элементы: центр» помогает в вертикальной центровки в то время как «оправдает-контента: центр» сделает его горизонтально по центру.

    Примечание. Flex работает не во всех браузерах. Убедитесь, что вы добавили соответствующие префиксы поставщиков для дополнительной поддержки браузера.


Вариант 2 работал хорошо для меня. Спасибо!
Anacron


0

Регулировка высоты линии, чтобы получить вертикальное выравнивание.

line-height: 90px;

3
Не буду понижать голос, потому что это может быть решением, однако это работает, только если вы можете гарантировать однострочный текст ...
dooleyo

0

Это должен быть правильный ответ. Самый чистый и простой:

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

0

Применить стиль:

position: absolute;
top: 50%;
left: 0;
right: 0;

Ваш текст будет в центре независимо от его длины.


0

Это сработало для меня:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

0

Для меня это было лучшее решение:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

-1
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

1
Это хороший чистый код. Хотя вы можете добавить ID к своим тегам div, чтобы вы могли использовать их позже при необходимости.
Amir Md Amiruzzaman

Благодарим за ваше предложение. Да, я согласен, что идентификатором полезно манипулировать.

2
ты читал предыдущие ответы? Можете ли вы сказать, что этот ответ добавить к предыдущим?
Темани Афиф

1
@AmirMdAmiruzzaman, можете ли вы сказать нам, что является самой чистой частью этого кода :) ... Я вижу встроенные стили, что не очень хорошо ... также добавление ID тоже не очень хорошая идея, нам нужны классы
Temani Afif

1
Дубликат подхода 1 ответа Джоша
Муним Мунна

-1

Действительно простой код, который работает для меня! Всего одна строка, и ваш текст будет центрирован по горизонтали.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

Вывод выглядит так:

Пожалуйста, проголосуйте за этот ответ, если он работает только для того, чтобы сэкономить время разработчиков, ищущих простые решения. Спасибо! :)


-2

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 

1
вопрос касается центрирования по горизонтали и вертикали, и это решение уже было предоставлено ранее
Temani Afif
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.