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

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

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

Любые идеи?

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

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 сделает эту работу.

Общие методы по состоянию на 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.

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

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

CSS:

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

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

Добавьте строку 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
}

Я всегда использую следующий 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/

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

  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

Передайте этот класс 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>

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

Подход 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>

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

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

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

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% от родителей.

<!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. Если у вас есть одно слово или предложение в одну строку, то следующий код может помочь.

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

GRID

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

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

line-height: 90px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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