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

Question

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

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

Answer 1

Установите width и установите margin-left и margin-right на auto. Это только для горизонтали . Если вы хотите оба пути, вы должны сделать это обоими способами. Не бойся экспериментировать; это не значит, что ты что-то сломаешь.

Answer 2

Мне недавно пришлось центрировать «скрытый» div (то есть display: none;), который имел внутри себя табличную форму, которую нужно было центрировать на странице. Я написал следующий jQuery для отображения скрытого div, а затем обновил CSS до автоматически сгенерированной ширины таблицы и изменил поле, чтобы отцентрировать его. (Переключение дисплея вызывается нажатием на ссылку, но этот код отображать не обязательно.)

ПРИМЕЧАНИЕ. Я делюсь этим кодом, потому что Google привел меня к этому решению для переполнения стека, и все бы работало, за исключением того, что скрытые элементы не имеют ширины и не могут быть изменены или отцентрированы до тех пор, пока они не отобразятся. 1003 *

$(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>

Answer 3

Обычно я использую абсолютную позицию:

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

Внешний div не нуждается в дополнительных свойствах, чтобы это работало.

Answer 4

Для 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 для поддержки устаревших браузеров.

Answer 5

Это мой ответ.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 6

Другое решение для этого без необходимости устанавливать ширину для одного из элементов - использовать атрибут CSS 3 transform.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

Хитрость в том, что translateX(-50%) устанавливает элемент #inner на 50 процентов слева от его собственной ширины. Вы можете использовать тот же трюк для вертикального выравнивания.

Вот Скрипка , показывающая горизонтальное и вертикальное выравнивание.

Более подробная информация о Mozilla Developer Network .

Answer 7

Крис Койер, который написал превосходный пост на тему «Сосредоточение в неизвестном» в своем блоге. Это сводка нескольких решений. Я опубликовал тот, который не опубликован в этом вопросе. У него больше поддержки браузеров, чем у 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;
}

Answer 8

Я понимаю, что довольно поздно опаздываю к игре, но это очень популярный вопрос, и недавно я нашел подход, который я не видел нигде здесь, поэтому я решил, что задокументирую.

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

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

РЕДАКТИРОВАТЬ: оба элемента должны быть одинаковой ширины для правильного функционирования.

Answer 9

Например, см. эту ссылку и фрагмент ниже:

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>

Тогда посмотрите этот пример на скрипке .

Answer 10

Центрирование только по горизонтали

По моему опыту, лучший способ центрировать прямоугольник по горизонтали - применить следующие свойства:

Контейнер:

• должно иметь 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>

См. Также эту скрипку !