Как горизонтально центрировать элемент?

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

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

#inner {
  display: inline-block;
}

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

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

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

Вы можете использовать следующий код:

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

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

Таким образом, элемент #inner будет корректно центрирован внутри родителя #outer, и при этом не будет фиксированной ширины и лишних отступов.

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

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

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

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

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

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