Problem
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.Lösung
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 Mozilla, Netscape 6+, der Internet Explorer 6 und Opera 7. Ältere Browser, aber auch der IE 6 im Quirks-Modus, kennen es nicht und ignorieren die Angabe. Damit schließt man sehr viele Besucher aus, diese Angabe allein ist auf lange Zeit nicht einsetzbar.
Ein Workaround 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"> Hallo Welt </div> </div>