Як горизонтально центрувати a <div>


4285

Як я можу горизонтально центрувати a <div>в межах іншого <div>за допомогою CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

13
З цих чудових відповідей я просто хочу відзначити, що ви повинні надати "#inner" "ширину", або вона буде "100%", і ви не можете сказати, чи вона вже в центрі.
Джоні

Joma Tech привів мене сюди
Barbu Barbu

@Barbu Barbu: Яким способом? У якому контексті?
Пітер Мортенсен

Відповіді:


4725

Ви можете застосувати цей CSS до внутрішнього <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Звичайно, ви не повинні встановити widthв 50%. <div>Буде працювати будь-яка ширина, менша за вміст . Це margin: 0 autoте, що робить власне центрування.

Якщо ви орієнтуєтесь на Internet Explorer 8 (і пізніші версії), можливо, краще мати це:

#inner {
  display: table;
  margin: 0 auto;
}

Це зробить внутрішній елемент горизонтальним і він працює без встановлення конкретного width .

Робочий приклад тут:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


12
Для вертикального центрування я зазвичай використовую "висота лінії" (висота лінії == висота). Це просто і приємно, але це працює лише з текстовим вмістом у одному рядку :)
Ніколас Гійом

98
Ви повинні використовувати тег! DOCTYPE на своїй html-сторінці, щоб він добре працював на IE.
Фабіо

15
Зауважте, що може знадобитися додати "float: none;" для #inner.
Мерт Мерце

15
Ви також встановлюєте верхній і нижній поля в 0, що не пов'язано. Краще кажучи, margin-left: auto; margin-right: autoя думаю.
Еммануель Тузері

13
Не обов'язково margin:0 auto: це може бути margin: <whatever_vertical_margin_you_need> autoдругим горизонтальним запасом.
YakovL

1244

Якщо ви не хочете встановлювати фіксовану ширину на внутрішній, divви можете зробити щось подібне:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Це робить внутрішнє divу вбудований елемент, з яким можна по центру text-align.


13
@SabaAhang правильного синтаксису для цього буде float: none;і, ймовірно , потрібно тільки тому , що #inner успадкував floatабо leftабо rightде - то ще в вашому CSS.
Дуг Маклін

7
Це приємне рішення. Просто майте на увазі, що внутрішній успадкує, text-alignтак що ви можете встановити внутрішнє text-alignзначення initialчи якесь інше значення.
pmoleri

приємне рішення Я думаю, що так
simon

381

Найкращі підходи - із CSS 3 .

Модель коробки:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Відповідно до зручності використання ви також можете використовувати box-orient, box-flex, box-directionвластивості.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Детальніше про центрування елементів дитини

І це пояснює, чому модель коробки - найкращий підхід :


25
Переконайтесь, що ви прочитали цю відповідь спочатку, перш ніж розпочати реалізацію цього рішення.
cimmanon

4
Сафарі, як і раніше, все ще вимагає -webkitпрапорців для флексокса ( display: -webkit-flex;і -webkit-align-items: center;та -webkit-justify-content: center;)
Джозеф Хансен

Я завжди вважаю, що використання лотового коду є поганою практикою, наприклад, з цим кодом я зосереджую свій div: display: table; маржа: авто; просто і легко
simon

Це я чи цей фрагмент коду не зосереджений
Майк

У 2020 році ми можемо використовувати Flexbox caniuse.com/#feat=flexbox
tonygatta

251

Припустимо, що ваш роздільник шириною 200 пікселів:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Переконайтесь, що батьківський елемент розташований , тобто відносний, фіксований, абсолютний або липкий.

Якщо ви не знаєте ширину вашого поділу, ви можете використовувати transform:translateX(-50%);замість від’ємного поля.

https://jsfiddle.net/gjvfxxdj/

З CSS calc () код може бути ще простішим:


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Принцип все одно той самий; покладіть предмет посередині і компенсуйте ширину.


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

край-ліворуч: авто; margin-right: авто; центрує елемент рівня блоку
killscreen

Ширина за замовчуванням для більшості елементів рівня блоку - автоматична, яка заповнює доступну область на екрані. Щойно в центрі розміщується він у тому самому положенні, що і вирівнювання зліва. Якщо ви хочете, щоб він був зоровим по центру, вам слід встановити ширину (або максимальну ширину, хоча Internet Explorer 6 і новіші версії не підтримують це, а IE 7 підтримує її лише в стандартному режимі).
killscreen

228

Я створив цей приклад, щоб показати, як вертикально і горизонтально align .

Код в основному такий:

#outer {
  position: relative;
}

і ...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

І воно залишиться в center навіть тоді, коли ви зміните розмір екрана.


12
+1 для цього методу, я збирався відповісти на нього. Зауважте, що ви повинні оголосити ширину елемента, який хочете централізувати горизонтально (або висоту, якщо центрувати вертикально). Ось вичерпне пояснення: codepen.io/shshaw/full/gEiDt . Один з найбільш універсальних і широко підтримуваних методів центрування елементів по вертикалі та / або горизонталі.
stvnrynlds

6
Ви не можете використовувати оббивки всередині div, але якщо ви хочете надати ілюзію, використовуйте рамку одного кольору.
Squirrl

Я думаю, щоб цей метод спрацював, вам потрібно встановити з і висоту внутрішнього
поділу

212

Деякі плакати згадували спосіб CSS 3 до центру за допомогою display:box.

Цей синтаксис застарів і більше не повинен використовуватися. [Дивіться також цю публікацію] .

Тож для повноти ось останній спосіб центрувати в CSS 3 за допомогою модуля гнучкої компонування коробки .

Тож якщо у вас проста розмітка, наприклад:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... і ви хочете відцентрувати елементи в полі, ось що вам потрібно для батьківського елемента (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

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


що ви маєте на увазі під "синтаксисом застарілим", він застарілий?
Konga Raju

6
Специфікація Flexbox пройшла 3 основні зміни. Найновіший проект - з вересня 2012 року, який офіційно знецінює всі попередні проекти. Тим НЕ менше, підтримка браузера плямиста (особливо старі Android браузерів): stackoverflow.com/questions/15662578 / ...
cimmanon

Це працювало для мене в Chrome, коли версія Джастіна Полія не була.
Верн Дженсен

Чи не "центр виправдання-контенту: центр"; для вертикального вирівнювання та "align-items: center;" для горизонтального вирівнювання?
Wouter Vanherck

3
@WouterVanherck це залежить від flex-directionзначення. Якщо це "рядок" (за замовчуванням) - тоді justify-content: center; для горизонтального вирівнювання (як я вже згадував у відповіді) Якщо це "стовпець" - то justify-content: center;для вертикального вирівнювання.
Даніельд

140

Якщо ви не хочете встановлювати фіксовану ширину і не хочете додаткового поля, додайте display: inline-blockдо свого елемента.

Ви можете використовувати:

#element {
    display: table;
    margin: 0 auto;
}

3
ті ж вимоги, що й дисплей: вбудований блок також ( quirksmode.org/css/display.html )
montrealmike

Я також цим користувався, але раніше ніколи не стикався display: table;. Що це робить?
Метт Кременз

97

Центрирування діва невідомої висоти та ширини

Горизонтально і вертикально. Він працює з досить сучасними браузерами (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera тощо).

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Тинкер з ним далі на Codepen або на JSBin .


89

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


49
і якщо ви не знаєте ширини? Скажіть, оскільки вміст динамічний?
gman

максимальна ширина? що на рахунок того?

1
Я використовую width: fit-content;і margin: 0 auto. Я думаю, що це може працювати з невідомою шириною.
Рік


88

Встановіть widthі встановіть margin-leftі, margin-rightщоб auto. Ось для горизонтальної тільки , хоча. Якщо ви хочете обох способів, ви просто зробите це обома способами. Не бійтеся експериментувати; це не так, що ти щось зламаєш.


62

Нещодавно мені довелося зосереджувати "прихований" дів (тобто display:none;), який мав в ньому форму, яку потрібно занести в центр на сторінці. Я написав наступний код jQuery, щоб відобразити прихований div, а потім оновити вміст CSS до автоматично сформованої ширини таблиці та змінити поле на центр. (Увімкнення перемикання дисплея спрацьовує натисканням на посилання, але цей код не потрібен.)

ПРИМІТКА. Я ділюся цим кодом, тому що Google привів мене до цього рішення щодо переповнення стека, і все працювало б, за винятком того, що приховані елементи не мають ширини і не можуть бути змінені / центрировані до моменту їх відображення.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>


59

Як я зазвичай це роблю, використовуючи абсолютне положення:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Зовнішній div не потребує додаткових експертів для цього.


Це може не спрацювати, якщо у вас є інші діви під центром.
NoChance

54

Для Firefox та Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Для Internet Explorer, Firefox та Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align:Властивість НЕ є обов'язковим для сучасних браузерів, але це необхідно в режимі Internet Explorer Quirks для підтримки застарілих браузерів.


5
Немає необхідності у властивості вирівнювання тексту. Це абсолютно не потрібно.
Тухід Рахман

Вирівнювання тексту насправді необхідне для того, щоб він працював у режимі IE quicks, тому якщо ви не заперечуєте, додаючи трохи вираження для підтримки старих браузерів, зберігайте його там. (IE8 з правилами IE8 і правилами IE7 обидва працюють без вирівнювання тексту, тому, можливо, це стосується лише IE6 та старших версій)
heytools


47

Іншим рішенням для цього без встановлення ширини для одного з елементів є використання transformатрибута CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Хитрість полягає в тому, що translateX(-50%)встановлюється #innerелемент на 50 відсотків зліва від власної ширини. Можна використовувати той же трюк для вертикального вирівнювання.

Ось Загадка показує горизонтальне та вертикальне вирівнювання.

Більше інформації можна знайти в Мережі розробників Mozilla .


2
Також можуть знадобитися префікси постачальника:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou

45

Кріс Койєр, який написав чудовий пост на тему "Центрування у невідомому" у своєму блозі. Це перелік декількох рішень. Я розмістив той, який не розміщений у цьому запитанні. Він має більшу підтримку браузера, ніж рішення Flexbox , і ви не використовуєте, display: table;що може порушити інші речі.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

39

Нещодавно я знайшов підхід:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Щоб правильно функціонувати, обидва елементи повинні бути однакової ширини.


Просто встановіть це правило для #innerтільки: #inner { position:relative; left:50%; transform:translateX(-50%); }. Це працює для будь-якої ширини.
Хосе Руй Сантос

33

Наприклад, дивіться це посилання та фрагмент нижче:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Якщо у вас багато дітей під батьком, то ваш вміст CSS повинен бути таким прикладу на скрипці .

Вигляд HTML-вмісту виглядає так:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Потім дивіться цей приклад на скрипці .


28

Центрування лише горизонтально

На мій досвід, найкращим способом горизонтального центрування коробки є застосування наступних властивостей:

Контейнер:

  • повинні мати text-align: center;

Вікно вмісту:

  • повинні мати display: inline-block;

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

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Дивіться також цю скрипку !


Центрування як горизонтально, так і вертикально

На мій досвід, найкращий спосіб центрирувати коробку обох вертикально, так і горизонтально - це використовувати додатковий контейнер і застосувати наступні властивості:

Зовнішній контейнер:

  • повинні мати display: table;

Внутрішній контейнер:

  • повинні мати display: table-cell;
  • повинні мати vertical-align: middle;
  • повинні мати text-align: center;

Вікно вмісту:

  • повинні мати display: inline-block;

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

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Дивіться також цю скрипку !


27

Найпростіший спосіб:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


1
Як зазначає загадка, у #inner має бути встановлена ​​ширина.
Майкл Террі

#outerне потрібен жоден, width:100%;як <div>завжди є за замовчуванням width:100%. і text-align:centerтеж зовсім не є необхідним.
Мобарак Алі

27

Якщо ширина вмісту невідома, можна скористатися наступним методом . Припустимо, у нас є ці два елементи:

  • .outer - повна ширина
  • .inner - не встановлено ширину (але максимум ширини можна вказати)

Припустимо, обчислена ширина елементів становить 1000 пікселів і 300 пікселів відповідно. Виконайте наступне:

  1. Загорніть .innerвсередину.center-helper
  2. Зробіть .center-helperвбудований блок; він набуває такого ж розміру, що .innerробить його шириною 300 пікселів.
  3. Натисніть на .center-helper50% право відносно свого батька; це розміщує його зліва в 500 пікселів Wrt. зовнішній.
  4. Натисніть на .inner50% ліворуч відносно свого батька; це розміщує його зліва в -150 пікселів Wrt. центральний помічник, що означає, що його ліва частина знаходиться на 500 - 150 = 350 пікселів Wrt. зовнішній.
  5. Встановіть переповнення на .outerприховане, щоб запобігти горизонтальній смузі прокрутки.

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

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>


26

Можна зробити щось подібне

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Це також буде вирівнювати #innerвертикально. Якщо ви не хочете, видаліть displayі vertical-alignвластивості;


25

Ось що ви хочете в найкоротші терміни.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

3
Це центрує його вертикально.
Майкл Террі

22

Вирівнювання тексту: центр

Застосування text-align: centerвкладеного вмісту зосереджено в полі рядка. Однак оскільки внутрішній div за замовчуванням width: 100%має встановити конкретну ширину або використовувати одне з наступних:


Маржа: 0 авто

Використання margin: 0 auto- це ще один варіант, який більше підходить для сумісності старих браузерів. Це працює разом з display: table.


Flexbox

display: flexповодиться як елемент блоку і викладає його вміст відповідно до моделі flexbox. Це працює з justify-content: center.

Зверніть увагу: Flexbox сумісний з більшістю браузерів, але не з усіма. Дивіться тут для повного і оновлюваного списку сумісності браузерів.


Перетворити

transform: translateдозволяє змінювати простір координат моделі візуального форматування CSS. За його допомогою елементи можна перекладати, обертати, масштабувати та перекошувати. Для центрування по горизонталі потрібно position: absoluteі left: 50%.


<center> (Застаріло)

Тег <center>є альтернативою HTML text-align: center. Він працює на старих веб-переглядачах та на більшості нових, але це не вважається хорошою практикою, оскільки ця функція застаріла і була вилучена із веб-стандартів.


22

Ви можете використовувати display: flexдля свого зовнішнього діва та для горизонтального центру, який потрібно додатиjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

або ви можете відвідати w3schools - CSS flex Property для отримання додаткових ідей.


21

Flex має понад 97% охоплення браузера і може бути найкращим способом вирішити подібні проблеми протягом кількох рядків:

#outer {
  display: flex;
  justify-content: center;
}

21

Ну, мені вдалося знайти рішення, яке, можливо, підійде до всіх ситуацій, але використовує JavaScript:

Ось структура:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

А ось фрагмент JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Якщо ви хочете використовувати його в чуйному підході, ви можете додати наступне:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

21

Цей метод також працює чудово:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Для внутрішнього <div>боку єдиною умовою є те, що його heightі widthне повинно бути більше, ніж у контейнера.


19

Існував один варіант, який я знайшов:

Всі кажуть використовувати:

margin: auto 0;

Але є й інший варіант. Встановіть цю властивість для батьківського div. Він прекрасно працює в будь-який час:

text-align: center;

І бач, дитина йди центром.

І нарешті CSS для вас:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

робота з вирівнювання тексту для вирівнювання тексту в контейнері, а не для цього контейнера до його батьківського.
Lalit Kumar Maurya

Я перевіряю це, я проблему з встановленням дитини на центр, повинен, коли у вас є більше однієї дитини, більше запасів: 0 відповідь на автоматичний шрифт, але, центр вирівнювання тексту, для батьків роблять цю дитину центром, навіть якщо вони є елементом і не будьте текстом, не перевіряйте і дивіться, що станеться
Pnsadeghy

лише вирівнювання тексту в центрі. Ви маєте право зараз, але коли ви пишете css-контейнер, який містить дочірню різну ширину та колір, ваш код не працює. Перевірте це знову !!!!
Lalit Kumar Maurya

Дивіться цей приклад jsfiddle.net/uCdPK/2 та скажіть, що ви думаєте про це !!!!!
Lalit Kumar Maurya
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.