Питання Як вертикально центрувати текст за допомогою CSS?


У мене є елемент div, який містить текст, і я хочу вирівняти вміст цього div вертикально центру.

Ось мій стиль div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Який найкращий спосіб зробити це?


1811
2018-01-14 21:25


походження


можливий дублікат Як прокручувати текст вертикально за допомогою css - leonbloy
можливий дублікат Кращий спосіб центрування <div> на сторінці вертикально та горизонтально? - Dan Dascalescu
Довідка W3C: w3.org/Style/Examples/007/center.en.html - nu everest
Сучасний спосіб: використовувати гнучко - Mistalis
Копії фрагментів на цій сторінці працюватимуть для вас: codepuran.com/web-designing/... - Akshay Pethani


Відповіді:


Ви можете спробувати цей основний підхід:

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

Хоча це працює лише для однієї рядка тексту, тому що ми встановлюємо висоту рядка з тим самим висотом, що і елемент, що містить поле.


Більш універсальний підхід

Це ще один спосіб вирівнювання тексту вертикально. Це рішення буде працювати для одного рядка та декількох рядків тексту, але воно все ще потребує контейнера із фіксованою висотою.

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>

CSS просто розмір <div>, вертикально центру вирівнює <span> встановивши <div>'s рядок висоти дорівнює його висоті, і робить <span> вбудований блок з vertical-align: middle. Потім він встановлює лінійний висоту до нормального для <span>, тому його вміст природно протікає всередині блоку.


Імітація таблиці дисплея

І ось ще один варіант, який може не працювати на старших браузери, які не підтримують display: table і display: table-cell (в основному просто Internet Explorer 7). Використовуючи CSS, ми імітуємо поведінку таблиці (оскільки таблиці підтримують вертикальне вирівнювання), а HTML - так само, як і другий приклад:

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>


Використання абсолютного позиціонування

Цей метод використовує абсолютно розташовану елемент, що встановлює верхню, нижню, ліва і правильну 0. Це більш детально описано в статті Smashing Magazine, Абсолютне горизонтальне та вертикальне централювання в CSS.


2452
2018-03-06 08:15



Тому що це стає не так, якщо змінюється розділ або текст, або додано більше вмісту. - Rob
Але це те, що він сказав, якщо ви знаєте, скільки тексту ви будете використовувати його абсолютно прийнятно ... Однак рішення нижче, тим більш гнучким - acSlater
Тільки 3-й підхід добре працює в моєму Firefox 22.0, однак він не працює для всіх браузерів. Перші 2 підходи перестають нормально працювати, коли я змінюю розмір висоти для div - YMC
Як я можу досягти такої мети, встановивши висоту div: "висота: 100%"; ? - Fedor
The table-cell техніка досить прохолодна, але вміст змінюється відповідно до батьківського контейнера. Ось чудова техніка з CSS Tricks, використовуючи псевдоелемент before: css-tricks.com/centering-in-the-unknown . Цей зміст не змінюється таким чином, але він працює тільки в IE8 +. - Ian Campbell


Інший спосіб (не згаданий тут ще) - це Flexbox.

Просто додайте наступний код до контейнер елемент:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Демонстрація Flexbox 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

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

Таким чином, щоб орієнтувати елемент flex, як горизонтально, так і вертикально, просто встановіть його margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Все вищевикладене стосується центрування предметів під час їх розміщення горизонтальні ряди. Це також поведінка за замовчуванням, оскільки за замовчуванням це значення для flex-direction є row. Якщо, однак, потрібно скласти гнучкі предмети вертикальні колони, потім flex-direction: column слід встановити на контейнер, щоб встановити основну вісь як стовпчик і додатково justify-content і align-items властивості зараз працюють навпаки з justify-content: center центрирування вертикально і align-items: center центрирування по горизонталі)

flex-direction: column демонстрація

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Гарне місце для початку з Flexbox, щоб побачити деякі з його функцій і отримати синтаксис для максимальної підтримки браузера flexyboxes 

Крім того, підтримка браузера в даний час дуже хороша: канюти

Для сумісності крос-браузера для display: flex і align-items, ви можете використовувати наступне:

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

960
2018-01-14 21:29



Таблиця підтримки Flexbox - user
+1 це добре працює, коли діви займають всю ширину екрана - Andrew Bringaze
Це добре працює і для мене, решта вищевказаних не працює на моєму сайті. Але візуальна студія не визнає display: flex. - Antonio Ooi
IE = ми ніколи не зможемо мати хороших речей - Andrew Hoffman
Це БОМБ !!!! Це працює як бос у браузерах Chrome і Chrome. - Frank


Ви можете легко зробити це, додавши наступний фрагмент CSS-коду:

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

Це означає, що ваш CSS нарешті виглядає так:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


110
2017-10-25 18:12



Схоже, що вбиває атрибути маржи, однак. - Tim
Зауважте, що це рішення не підтримує IE7 - mrtsherman
@mrtsherman Або, скоріше, IE7 не підтримує це рішення. ;-) - James McLaughlin
@Costa - можливо, вам доведеться також плавати батьківський div, якщо ви плаваєте щось усередині цього div ... check out stackoverflow.com/questions/2062258/... - Ian Campbell
Це вимикає min-heigth. - Penguin


Для довідки і додати просту відповідь:

Чистий CSS:

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

Або як SASS / SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Використовуйте за:

.class-to-center {
    @include vertical-align;
}

За повідомленням блогу Себастьяна Екструма У вертикалі вирівнюється щось лише з 3 рядків CSS:

Цей метод може призвести до розмиття елементів через розміщення елемента на "півпікселі". Рішенням для цього є встановлення його батьківського елемента для збереження-3d. Подобається наступне:

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

Ми живемо у 2015 році + і Flex Box підтримується кожним великим сучасним браузером.

Це буде спосіб створення веб-сайтів звідси.

Дізнайся це!


97
2017-08-11 11:59



Чистий CSS: зробив для мене трюк, але мені якось довелося користуватися absolute позиціонування .. - d4Rk
У мене була така сама проблема, як @ d4Rk. Мій (блок) контейнер мав відносне розташування та висоту, а елемент, який потребує вертикального центрування (зображення), повинен був бути абсолютно розташованим. Яка складна / проста проблема !! Ось сподівання, що в наступній версії CSS є простий / простий виправлення. - Vanessa King


Весь кредит належить цьому власнику посилання @ Севастону Екстрему Посилання; будь ласка, пройдіть через це. Подивіться в дії codepen. Читаючи цю статтю, я також створив демонстраційна скрипка.

За допомогою трьох рядків CSS (за винятком префіксів постачальників) ми можемо це зробити за допомогою перетворення: translateY вертикально центрирує все, що ми хочемо, навіть якщо ми не знаємо його висоту.

Зміна властивостей CSS зазвичай використовується для обертання та масштабування елементів, але за допомогою функції translateY ми можемо вертикально вирівняти елементи. Зазвичай це потрібно зробити з абсолютним позиціонуванням або встановленням лінійних висот, але це вимагає від вас знати висоту елемента або працювати тільки на однорядковий текст тощо.

Отже, щоб зробити це, ми пишемо:

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

Це все, що вам потрібно. Це подібна техніка для методу абсолютної позиції, але з переважанням, що ми не повинні встановлювати жодного висоти на елементі або властивості позиції у батьків. Він працює прямо з коробки, навіть у Internet Explorer 9!

Щоб зробити це ще простішим, ми можемо написати його як міксін з префіксами постачальника.


49
2017-12-13 20:09



Я зробив мінімальні випробування, але, здається, працює для мене! - Iain Collins
змінюючи розмір шрифту, який він переміщує по всьому місцю - Jon49


Flexboxes, які були введені в CSS3, є рішенням:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Примітка: Замінити рядок, над якою позначено як важливу, за допомогою однієї з цих рядків, якщо ви хочете орієнтувати текст:

1) Тільки вертикально:

margin: auto 0;

2) Тільки горизонтально:

margin: 0 auto;

UPDATE: Як я помітив, цей трюк працює з сітки (дисплей: сітки), також.


22
2017-08-28 10:11



Не могли б ви, будь ласка, пояснити, чому гнучко має такий ефект у цьому випадку, якщо зосереджувати абзац? - elena
@elena Фактично, я точно не знаю, чому я виявив, коли я намагався. Однак, це буде розглядом для нових версій CSS. Наприклад, якщо ви зміните дисплей на сітку в цьому випадку, він буде працювати так само, як flexboxs. Я думаю, що сітки та flexboxs оснащені новими функціями для компенсації попередніх помилок CSS; і цей трюк є одним з них. - MAChitgarha


Гнучкий підхід

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26