0 3637

Vertikale und horizontale Zentrierung eines DIV Containers per CSS

Oftmals wird die Frage gestellt, wie man vertikal mit CSS zentrieren kann.

Für die horizontale Zentrierung ist die text-align Methode vorgesehen. Doch was macht man, um etwas vertikal zu zentrieren?

Dazu gibt es eine sehr einfache Lösung:

Nehmen wir mal als Beispiel einen Div-Container mit der Breite 500px und der Höhe 100px.

Wir erstellen in einer HTML einen DIV-Container mit der id=“zentr“ und setzen in der CSS folgende Eigenschaften:

Beispielcode:

body {
background: #cc0000;
}

#zentr {
width: 500px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -50px;
background: #ffffff;
}

Das bedeutet: Wir setzen erst den Container mit seiner linken oberen Ecke an die Bildmitte und ziehen dann per Margin die Hälfte der Höhe und die Hälfte der Breite wieder ab. Und so einfach kann man einen DIV-Container zentrieren.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter