Как я обычно делаю это, используется абсолютная позиция:

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

Внешнему div не нужно никаких дополнительных свойств для этого.

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

Самый простой способ:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

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

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>

Затем см. пример на скрипке .

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

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

#outerDiv {
  width: 500px;
}

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

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

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

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

#outer {
  position: relative;
}

и ...

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

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

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

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

Контейнер:

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

См. также этот Fiddle !

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

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

Внешний контейнер:

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

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

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

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

#inner {
  display: inline-block;
}

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

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

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

Горизонтально и вертикально.

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

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

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

Для Firefox и Chrome:

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

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

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

Некоторые плакаты упоминали о CSS & nbsp; 3 пути к центру с помощью display:box.

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

Так что для полноты здесь самый последний способ сосредоточиться в CSS & nbsp; 3 с помощью Flexible Box Layout Module .

Итак, если у вас есть простая разметка вроде:

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

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

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

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

EDIT: оба элемента должны быть одинаковой ширины для правильной работы.

Этот метод также отлично работает:

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

Для внутреннего <div> единственным условием является то, что его height и width не должны быть больше, чем у его контейнера .

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

Вы можете сделать что-то вроде этого

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

Свойство box-align CSS3

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

Text-align: center

Применяя text-align: center , встроенное содержимое центрируется в строке строки. Однако, поскольку внутренний div по умолчанию width: 100%, вы должны установить определенную ширину или использовать одно из следующих значений:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

Маржа: 0 auto

Использование margin: 0 auto - еще одна опция, и она более подходит для совместимости старых браузеров. Он работает вместе с display: table .

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

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

Flexbox

display: flex ведет себя как элемент блока и выдает его содержимое в соответствии с моделью flexbox. Он работает с justify-content: center .

Обратите внимание: Flexbox совместим с большинством браузеров, но не со всеми. См. здесь для полного и обновленного списка совместимости браузеров.

#inner {
  display: inline-block;
}

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

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

Transform

transform: translate позволяет вам изменять координатное пространство модели визуального форматирования CSS. Используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. Для центрирования по горизонтали требуется position: absolute и left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

<center> (Устаревший)

Тег <center> является альтернативой HTML text-align: center . Он работает с более старыми браузерами и большинством новых, но это не считается хорошей практикой, поскольку эта функция устарела и удалена из веб-стандартов.

#inner {
  display: inline-block;
}

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

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

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

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

Попробуйте сыграть с

margin: 0 auto;

Если вы хотите также центрировать свой текст, попробуйте использовать:

text-align: center;