DIVs zentrieren mit CSS

Wie zentriert man einen <div>-Block mit CSS? Die nachfolgenden Code-Beispiele werden von allen Browsern unterstützt.

In den Beispielen 01 und 02 werden wir ein <div> mit und ohne den sich im <div> befindenden Text mittig ausrichten.
Im Beispiel 03 wird die relative Zentrierung eines <div>s mit zusätzlichem Element in der selben Zeile behandelt.

01: Zentriertes <div>

.center-div {margin-left: auto;
margin-right: auto;
width: 250px;
}

Beispiel

Dieser Text ist linksbündig ausgerichtet. Das <div> ist hingegen zentriert.
Nutzung:
<div class="center-div"> ... </div>

02: Zentriertes <div> mit zentriertem Text

.center-div-txt {margin-left: auto;
margin-right: auto;
width: 250px;
text-align: center;
}

Beispiel

Sowohl der Text also auch das dazugehörige <div> sind zentriert ausgerichtet.
Nutzung:
<div class="center-div-txt"> ... </div>

03: Zentriertes <div> + fließendes Element

.center-div {margin-left: auto;
margin-right: auto;
width: 250px;}
.floatleft-div {float: left;
width: 30%;}
.floatright-div {float: right; 
width: 70%;
}

Beispiel

Die CSS-Codebox befindet sich links, während das Beispiel zentriert anhand einer flexiblen prozentualen Breite ausgerichtet ist.
Nutzung:
<div class="floatleft-div"> ... </div>
<div class="floatright-div">

<div class="center-div"> ... </div>

</div>

Anmerkungen

Wenn Sie ein <div> zentrieren, geben Sie immer die Breite an. Sie können jede Einheit dazu nutzen (em, px, %, …), doch wenn Sie keine Breite angeben, wird der Browser das <div> mit 100% des umgebenden Raumes belegen. Dies bedeutet, dass sich das <div> nicht zentrieren lässt, weil es nichts gibt, was man zentrieren könnte.
Falls das zentrierte <div> nur einmal pro Seite auftaucht, dann wäre die sauberste Lösung, id anstatt class zu nutzen. Ändern Sie dazu im Code . zu #.

Das war’s. Ich wünsche einen schönen Tag.