div genau mittig zentrieren?

Hi, ich will ein <div> mittig zentrieren, also nicht nur horizontal sondern auch vertikal, also einfach in der Mitte des Bildschirms. Jemand ne Idee wie das gehen könnte, hab schon fast das ganze Internet durchkämmt...

So soll das am Ende sein... DANKE!!!

Answer 1

[medmonk]

Mein gut gemeinter Tipp: Beschäftige dich mit CSS und dem CSS Box-, Flexbox-Modell sowie CSS Grid Layouts. Auf die schnelle mag es für dich vielleicht hilfreich sein, wenn man dir bloß die Lösung nennt. Längerfristig wirft es wohl möglich nur unnötig weitere Frage auf und das eigentliche Lernen eher auf der Strecke bleibt.

HTML:

<div class="container">
 <div class="content">centered content</div>
</div>

CSS:

.cotainer {
   width: 100%; 
   min-height: 100vh; 
   display: flex; 
   justify-content: center;
   aling-items: center;
}

oder:

.container {
 min-height: 100vh;
 position: relative;
}

.content {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%; 
  right: 50%;
  transform: translate(-50% -50%);
}

Weitere Lösungen zum vertikalen und horizontalen Zentrieren von Elementen kannst du auch dem verlinkten Artikel von Florence Maurice entnehmen.

https://maurice-web.de/css-vertikale-zentrierung-unbekannter-hoehe/

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Comments

[Babelfish]

Im ersten CSS-Block sind zwei kleine Fehler drin:

.container

align-items

[medmonk]

@Babelfish

Falls ich es auf dieser Plattform noch nie erwähnt habe, ich hasse die Code-Block-Implementierung. 😂 Danke für deine Korrektur.

Answer 2

[busspuss99]

Würde das mit margin/padding in Prozent versuchen.