CSS - Elemente vertikal mittig platzieren

Ein Element horizontal mittig zu platzieren ist eine ziemlich einfache Sache. Für Texte gibt es die Angabe text-align:center – für Container-Elemente die Angabe margin: 0 auto.

Aber wie platziert man sein Element nun auch vertikal mittig? Es gibt die Möglichkeit, das Element absolut zu positionieren, ihm einen 50% Abstand von oben zu geben und einen Minus-Margin von der Hälfte der Höhe des Elements zu geben. Das klingt nicht nur verwirrend, sondern ist auch eine unschöne Lösung.

Was, wenn der nun Text ab einer gewissen Bildschirmbreite eine Zeile länger wird? Dann müsste man für jeden solchen Fall einen Breakpoint setzen, bei dem der Margin angepasst wird.

Dabei gibt es eine viel einfachere und schönere Lösung. Diese wollen wir Ihnen anhand des folgenden Beispiels einmal zeigen.

In unserem Beispiel wollen wir einen Head- & Subline sowohl horizontal, als auch vertikal mittig auf einem Hintergrund-Bild platzieren.

Der HTML-Code sieht dafür folgendermaßen aus:

<div id="bg-container">
    <div class="inside">
        <h1>Unsere Headlineh1>
        <h2>Unsere Sublineh2>
    div>
div>

Wenn mehrere Elemente als Ganzes mittig auf dem Bild platziert werden sollen, so benötigen diese einen umschließenden Container, da die Elemente sonst nicht untereinander, sondern nebeneinander dargestellt werden.

Außer unseren beiden Headlines sehen wir in unserem Beispiel nun noch nicht viel. Um das zu ändern bearbeiten wir nun unsere CSS-Datei. Zuerst legen wir einen Hintergrund fest und stylen den Text ein wenig.

#bg-container{
    height: 300px;
    width:100%;
    background: #49bed3;
    color: #fff;
    font-family: 'Titillium Web';
}

.inside{
	padding: 20px;
	border: 4px solid #fff;
}
 
h2{
    font-size: 40px;
    font-weight: 900;
    text-transform:uppercase;
    margin: 0;
}
 
h3{
    font-size: 17px;
    margin: 0;
}

Das sieht doch schon fast gut aus. Nun wollen wir unseren Text noch mittig auf dem Bild platzieren. Der Code hierfür sieht folgendermaßen aus:

#bg-container{
    /* Text zentrieren */
    text-align:center;
     
    /* Inhalt vertikal mittig platzieren */
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
 
.inside{
    /* Container horizontal mittig platzieren */
    margin: auto;
}

Und so einfach ist es. Diese Technik wird von allen modernen Browsern und ab Internet Explorer 10 unterstützt.