Immer wieder stand ich vor dem Problem, dass ich den Content einer Seite zentrieren musste.

Mein standardmäßiger Weg wurde deshalb ein <center>-Tag um die komplette Seite zu setzen und den Content dem entsprechend aufzubauen, dass er mit dem Tag zusammenarbeitete.

Ab und an kam mir aber immer mal wieder die Lösung unter, bei der die "margin"-Style-Eigenschaft zur Problemlösung verwendet wurde. Das Problem: Irgendwie funktionierte es manchmal - und manchmal nicht. Aber jetzt weiß wie es definitiv funktioniert:

margin:0 auto

Mit dieser Kombination sagt ihr der Seite "kümmer dich selber darum, dass die Seite links und rechts den selben Abstand hat - oben und unten brauchst du aber keinen Abstand".

Erklärung: Der erste Wert behandelt das margin-top und -bottom, während der zweite Wert -left und -right beeinflusst.

Damit aber die Seite auch wirklich zentriert wird, reicht es nicht aus diese Eigenschaft zu setzen, denn dann sagt sich der Browser: Dann nehm ich halt die ganze Breite des Bildschirms. Deshalb müsst ihr dem Content ebenfalls eine feste Breite geben:

width: Xpx (X = numerische Angabe der Breite)

Wenn ihr diese beiden Style-Eigenschaften dem umschließenden Content zugeweißt, zentriert sich dieser automatisch, egal wie breit ihr das Fenster macht.

 

AutoMargin

 

Hinweis: Wenn ihr übrigens mit dem oben genannten <center>-Tag arbeitet: Das funktioniert auch - allerdings richten sich dann alle Elemente in eurem Content entsprechend mittig aus. Das bedeutet, dass ihr Positionen anders bestimmen und ggf. allen Elementen ein text-align:left geben müsst.