margin: auto;

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

Indem man die Breite (width) eines Block-Elements definiert, verhindert man, dass es sich nach rechts und links bis zum Rand des umgebenden Containers ausbreitet. Durch Setzen des rechten und linken Außenabstands (margin) auf auto lässt sich das Element horizontal zentrieren. Das Element nimmt so die definierte Breite an und teilt den verbleibenden Außenabstand gleichmäßig auf.

Nur wenn das Browserfenster schmaler wird als unser Element breit ist, ergibt sich ein Problem. Der Browser behebt dies, indem er der Seite eine horizontale Bildlaufleiste (scrollbar) hinzufügt. Das lässt sich verbessern.

</div>
  • Creative Commons License