in <div> zentrieren

Mit dem gewohnten, in XHTML aber nicht mehr enthaltenen <center>-Tag und align=center war es einfach, Elemente mittig auszurichten. In CSS heißt es jetzt text-align:center und gilt nur noch innnerhalb von Block-Elementen, etwa Absätzen, Tabellen oder Div-Bereichen.

Um eine <div>-Box selber horizontal auf dem Bildschirm zu zentrieren, wird in Standard konformen Browsern seine margin auf auto gesetzt.

  <div style="width: 200px; margin: 0px auto">
    Hallo Welt
  </div>

Zu den Browsern, die dieses verstehen, gehören Firefox, Netscape 6+, der Internet Explorer 6+ und Opera 7+. Ältere Browser, aber auch der IE im Quirks-Modus, kennen es nicht und ignorieren die Angabe. Bei den Oldies klebt die Box am linken Bildschirmrand.

Ein Workaround, der auch alte Browser befriedigt, ist, den zu zentrierenden Bereich in einen anderen Bereich einzubetten, der seinen Inhalt dann mit text-align zentriert. Notfalls ist als übergeordneter Bereich auch der <body> des Dokuments zu verwenden.

  <div style="text-align: center">
  <div style="width: 200px; margin: 0px auto; text-align: left">
    Hallo Welt
  </div>
  </div>

Man beachte, daß durch die Vererbung das text-align vom übergeordneten Element bzw. <body> auf alle enthaltenen Elemente übergeht. Will man dieses ausschalten, muss ihre Ausrichtung eigens wieder auf left gesetzt werden. Etwas umständlich, aber problemlos machbar.

Problematischer ist eine vertikale Zentrierung auf dem Bildschirm zu erreichen. Ein height=100% hat früher bei Tabellen mehr oder weniger gut funktioniert, gehörte aber nie zum HTML-Standard und verhindert heute, dass ein Dokument valide ist. Und wo ist die Mitte eines Browserfensters anzusetzen? Sind Sidebars, Tableisten, Toolbars, Statuszeile usw. berücksichtigt? Macht ihre Vernachlässigung nicht vielmehr das ganze angestrebte Design zunichte? Von den Möglichkeiten alternativer Displays ganz zu schweigen. Die Tipps in den unten angegebenen Verweisen können mich jedenfalls nicht überzeugen.

Die oben vorgeschlagene Lösung zur horizontalen Zentrierung ist problemlos einsetzbar. Weitere Tricksereien, etwa zur vertikalen Zentriertung, mögen für eine einfache Message-Box noch sinnvoll sein. Ansonsten halte ich sie jedoch für höchstens theoretisch interessant, in der praktischen Umsetzung aber nicht nutzbar. Es durchbrecht die logische Anordnung der Elemente auf dem Bildschirm, ihre sichere Umsetzung in allen Umgebungen und die Zusammenwirkung mit anderen Elementen ist viel zu ungewiss. Es gilt vielmehr, den normalen Fluss der Bereiche zu verstehen und ihn sinnvoll zu nutzen. Siehe dazu CSS Positionierung und der Fluß der Elemente.