Korrekte Browserunabhängige Zentrierung

Wer kennt das nicht, man arbeitet mit CSS an einer Webseite und möchte ein Element wie ein Container Regelkonform zentrieren.

Das Problem ist, dass der Internet Explorer die Zentrierung für Container wie zum Beispiel ein „div“ ignoriert. Es ist vorgesehen einen Container über 2 gleichwertige „margin“ Werte zu zentrieren. Der Internet Explorer hingegen setzt dies nicht richtig um, sondern nutzt fälschlicherweiße „text-align“.

#box1{
 margin-left: auto;
 margin-right: auto;
 }

Dies ist eine richtige Umsetzung, Problem – Internet Explorer setzt dies falsch um.

Lösung:

1. Äußeren Container 100% Breit mit innerem Container, welcher durch „text-align“ fälschlicherweiße zentriert wird. Diese Variante funktioniert in jedem Browser.

#box1_outer{
   width: 100%;
   text-align: center;
}

#box1_inner{
   margin: 0 auto;
}

2. Clevere bessere Lösung. Es müssen 24% sein, damit kein Scrollen nach Links und Rechts eingeblendet wird. Funktioniert auch im Internet Explorer

#box1{
   margin-left: 24%;
   margin-right: 24%;
}

Beispiel:

Beispielcode:

Hallo, ich bin überall zentriert!