У мене 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/ є рішення . Шукайте "вертикальне вирівнювання".

Оскільки вони, як правило, хакі або додавання складних дівок ... Я зазвичай використовую таблицю з однією коміркою, щоб зробити це ... щоб зробити це максимально просто.

Оновлення до 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: ...рядок з елемента flex, і він автоматично згортається.

Приклад: http://jsfiddle.net/2woqsef1/2/

Наведені вище приклади були протестовані в основних браузерах, включаючи MS Edge та Internet Explorer 11.

Одне технічне зауваження, якщо вам потрібно його налаштувати: всередині елемента flex, оскільки цей елемент flex не є самим контейнером flex, старий CSS-режим, який не є flexbox, працює так, як очікувалося. Однак якщо ви додасте додатковий гнучкий елемент до поточного гнучких контейнерів, два гнучкі елементи будуть розміщені горизонтально. Щоб їх розмістити вертикально, додайте flex-direction: column;в гнучку ємність. Ось як це працює між гнучким контейнером та його безпосередніми дочірніми елементами.

Існує альтернативний метод проведення центрування: не вказуючи 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, флексбокс не працюватиме, а спосіб вище та line-heightметод буде працювати. Інакше флексбокс зробив би цю роботу.

Загальні методики станом на 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 для цього розділу.

Тільки комірки таблиці підтримують vertical-align: middle;, але ви можете дати це визначення [таблиця-комірка] поділу ...

Живий приклад тут: 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>

Код посилання: 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;
   }

   Примітка. Переконайтесь, що властивість висоти лінії однакова висоті поділу.

   Зображення

   Але якщо вміст містить більше одного слова або рядка, це не працює. Крім того, будуть випадки, коли ви не можете вказати розмір поділу в px або% (коли розділення дійсно мало, і ви хочете, щоб вміст знаходився точно посередині).

2. Щоб вирішити це питання, ми можемо спробувати наступне поєднання властивостей.

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

   Зображення

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

   Примітка: Flex працює не у всіх браузерах. Переконайтеся, що ви додали відповідні префікси постачальника для додаткової підтримки браузера.

ГРИД

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