Как горизонтально центрировать <div>?

Question

Как я могу горизонтально центрировать <div> внутри другого <div> с помощью CSS?

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

Answer 1

Вы можете применить этот CSS к внутреннему <div>:

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

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

Если вы нацеливаетесь на IE8 +, может быть лучше иметь это вместо:

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

Answer 2

Если вы не хотите устанавливать фиксированную ширину внутри div, вы можете сделать что-то вроде этого:

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

#inner {
  display: inline-block;
}

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

Это превращает внутренний div во встроенный элемент, центрируемый с помощью text-align.

Answer 3

Лучшие подходы с 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;
}

Подробнее о центрировании дочерних элементов

• Ссылка 2

• Ссылка 3

• Ссылка 4

И это объясняет, почему блочная модель является лучшим подходом :

• Почему модель коробки W3C считается лучшей?

Answer 4

Предположим, что ваш div 200px wide:

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

Убедитесь, что родительский элемент позиционирован , то есть относительный, фиксированный, абсолютный или липкий.

Если вы не знаете ширину вашего div, вы можете использовать transform:translateX(-50%); вместо отрицательного поля.

https://jsfiddle.net/gjvfxxdj/

Answer 5

Я создал этот пример , чтобы показать, как по вертикали и по горизонтали align.

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

#outer {
  position: relative;
}

и ...

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

и он останется в center, даже если вы измените размер вашего экрана.

Answer 6

В некоторых авторах упоминается способ центрирования CSS 3 с использованием display:box.

Этот синтаксис устарел и больше не должен использоваться. [См. Также этот пост] .

Так что для полноты изложения здесь представлен новейший способ центрирования в CSS 3 с использованием модуля Flexible Box Layout * 1011 * Так что, если у вас есть простая разметка вроде:

<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 , вот хорошее место для поиска.

Answer 7

Если вы не хотите устанавливать фиксированную ширину и не хотите дополнительного поля, добавьте display: inline-block к своему элементу.

Вы можете использовать:

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

Answer 8

Центрирование div неизвестной высоты и ширины

По горизонтали и вертикали. Он работает с достаточно современными браузерами (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 .

Answer 9

Он не может быть отцентрирован, если вы не зададите ему ширину, в противном случае он займет по умолчанию все горизонтальное пространство.

Answer 10

CSS3's box-align свойство

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}