Питання Як горизонтально розташувати
в іншому
?


Як я можу поставити горизонтально центр <div> в іншому <div> використовуючи CSS (якщо це навіть можливо)?

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


3636
2018-06-09 08:34


походження


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


Відповіді:


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

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

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

Якщо ви націлюєтесь на IE8 +, можливо, краще мати це замість:

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

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

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

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4097



Для вертикального центрування я зазвичай використовую "line-height" (line-height == height). Це простий і приємний, але він працює тільки з текстовим змістом в одному рядку :) - Nicolas Guillaume
Вам потрібно використовувати тег DOCTYPE на вашій HTML-сторінці, щоб він працював у IE. - Fabio
Зауважте, що може бути необхідно додати "float: none;" для #inner. - Mert Mertce
Ви також встановлюєте верхню і нижню поля до 0, що не пов'язано між собою. Краще покласти margin-left: auto; margin-right: autoЯ думаю. - Emmanuel Touzery
Не обов'язково margin:0 auto: це може бути margin: <whatever_vertical_margin_you_need> auto Другий - горизонтальний маржа. - YakovL


Якщо ви не бажаєте встановлювати фіксовану ширину на внутрішній div ви могли б зробити щось на зразок цього:

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

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

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


1111



@SabaAhang правильний синтаксис для цього буде float: none; і це, мабуть, потрібне лише тому, що #inner успадкував a float з обох left або right з де-небудь ще в CSS. - Doug McLean
Це гарне рішення. Просто пам'ятайте, що внутрішня буде успадкувати text-align тому ви можете встановити внутрішній text-align до initial або якесь інше значення. - pmoleri


З найкращими підходами 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%;
}

Згідно з вашою юзабілітістю, ви також можете використовувати box-orient, box-flex, box-direction властивості

Флекс:

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

Дізнайтеся більше про центрування дочірніх елементів

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


299



це також працює для мене, коли внутрішній div має плавати: ліворуч; - Tareq
Переконайтеся, що читаєте ця відповідь Перш ніж перейти до реалізації цього рішення. - cimmanon
Safari, як і раніше, все ще вимагає -webkit прапори для flexbox (display: -webkit-flex; і -webkit-align-items: center; і -webkit-justify-content: center;) - Joseph Hansen


Припустимо, що ваш div є 200px широкий:

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

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

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

https://jsfiddle.net/gjvfxxdj/


216



Це не працює в Safari - cesards
Мені не подобається це рішення, тому що, коли внутрішній елемент надто широкий для екрана, ви не можете прокручувати весь елемент по горизонталі. маржа: 0 автоматично працює краще. - Aloso
чому б ви залишили маржу: -100, це не спрацює - Robert Limanto
Я прочитав, що це єдиний метод, який буде працювати в IE6 / 7 - Andy
маржа ліворуч: авто; маржа праворуч: авто; центри елемент рівня блоку - unicodexm


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

Код в основному це:

#outer {
  position: relative;
}

і ...

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

і він залишиться в center навіть коли ти перевизначення розміру ваш екран


200



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


Деякі плакати згадують 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 */
}

.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 */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

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


158



stackoverflow.com/a/10010055/1312610 - ShibinRagh
що ви маєте на увазі за допомогою "синтаксису застарілого", чи це застаріло? - Konga Raju
Специфікація Flexbox пройшла 3 основні зміни. Останній проект - з вересня 2012 року, який офіційно призупиняє всі попередні проекти. Проте підтримка браузера є пятнистою (особливо старими браузерами Android): stackoverflow.com/questions/15662578/... - cimmanon
Це працювало для мене в Chrome, коли версію Джастіна Полі не було. - Vern Jensen
@ WouterVanherck це залежить від flex-direction вартість Якщо це "рядок" (за замовчуванням) - тоді justify-content: center;  це для горизонтального вирівнювання (як я вже згадував у відповідь) Якщо це "стовпчик" - тоді justify-content: center; для вертикального вирівнювання. - Danield


Якщо ви не бажаєте встановлювати фіксовану ширину і не бажаєте додаткової маржі, додайте display: inline-block до вашого елемента.

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

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

120



однакові вимоги до дисплея: inline-block теж (quirksmode.org/css/display.html) - montrealmike
Я теж використовував це, але я ніколи не зустрічався display: table; раніше Що це робить? - Matt Cremeens