Collin's Seite

Einen Container (div) zentrieren

21. Mai 2022 Lesedauer: 30 Sekunden

Im Internet, genauer gesagt unter Programmierern gibt es ja öfter das
Meme wo jemand nicht weiß wie man ein div zentriert.
Heute zeige ich es dir/euch jedoch.

Um ein div zu zentrieren musst du erstmal eins haben.
Hier erstelle ich ein div in der Klasse "center" mit dem Text "Hallo Welt!".

<div class="center">Hallo Welt!</div>

Um diesen div jetzt horizontal zu zentrieren musst du folgendes in die CSS Datei oder in den style Tag schreiben.

.center {
    text-align:center;
}


Für einen horizontal- und vertikalen div mussst du folgendes schreiben.

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid #FFFF00;
    padding: 10px;
}


Danke fürs lesen!
We support Ukraine and condemn war. Push Russian government to act against war. Be brave, vocal and show your support to Ukraine. Follow the latest news HERE