margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}
<div id="main">

Ajustar la propiedad width de un elemento block-level lo previene de estirarse hasta los bordes de su contenedor a la izquierda y derecha. Después puedes establecer la propiedad margin left y right para que sea auto y centrar de manera horizontal ese elemento en su contenedor. El elemento tomará el ancho que especificaste, después el espacio sobrante será dividido equitativamente entre los dos márgenes.

El único problema ocurre cuando el ancho del navegador es menor que el de tu elemento. El navegador resuelve esto creando una barra de desplazamiento (scrollbar) horizontal en la página. Arreglemos esa situación...

</div>
  • Creative Commons License