Jak wyśrodkować poziomo <div>?

Możesz zastosować ten CSS do wewnętrznego <div>:

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

Oczywiście, nie musisz ustawiać szerokości na 50%. Każda szerokość mniejsza niż zawierająca <div> będzie działać. Margines margin: 0 auto jest tym, co wykonuje rzeczywiste centrowanie.

Jeśli celujesz w IE8+, może być lepiej mieć to zamiast tego:

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

To sprawi, że wewnętrzny element będzie wyśrodkowany poziomo i działa bez ustawiania konkretnej szerokości.

Działający przykład tutaj:

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

Nie może być wyśrodkowany, jeśli nie nadasz mu szerokości, w przeciwnym razie zajmie domyślnie całą przestrzeń poziomą.

Ustaw szerokość i ustaw margin-left i margin-right na auto. To jest tylko dla poziomu, chociaż. Jeśli chcesz mieć oba sposoby, po prostu zrób to na oba sposoby. Nie bój się eksperymentować, to nie jest tak, że coś zepsujesz.