Mit Midjourney erstelltes Bild, welches einen jungen Menschen vor einem alten Computer zeigt. Im Hintergrund sieht men ein Weihnachtsbaum

Webdev-Fragen zum Advent: Tag 1

Wie zentrierst du ein Element sowohl horizontal als auch vertikal in einem Container mit flexbox?

a) display: flex; align-items: center; justify-content: center;

b) display: grid; align-content: center; justify-content: center;

c) position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);

d) margin: auto; align-items: center;

Zur Weihnachtszeit gibt es eine Menge an Adventskalendern mit Türen, hinter denen meist eine leckere Überraschung steckt. Auch das Web wird davon nicht verschont.

Vor einigen Jahren hab ich selbst auch so etwas gebaut. Aber da am Jahresende oftmals gerade für Projektleiter der „Jahresendkampf“ ist, bin ich da nicht mehr zu gekommen. Dieses Jahr möchte ich dennoch etwas versuchen: Und zwar werde ich jeden Tag bis zum 24.12. (vrsl. ich garantiere nicht dafür, dass es genau so eintritt) einen kleinen Quiz mit einer Frage aus den Bereichen der professionellen Webentwicklung online stellen. Konkret wird es Fragen zu den Themen CSS, WordPress, Barrierefreiheit und Webdesign geben.
Ich werde zu jeder Frage 4 Antwortmöglichkeiten geben. Mindestens eine davon wird korrekt sein.

Die richtige Lösung wird es dann irgendwann in Form eines Kommentares „Ah, das Problem hat sich erledigt, Ich habs gelöst! Tsschüüüüs“ auf einem Forum auf Stackoverflow oder Reddit veröffentlicht – oder am nächsten Tag ebenfalls hier auf der Website zu finden sein.

Soviel zur Einführung. Nun aber los!


Die Quizfrage zum 1. Dezember 2024 betrifft das Thema CSS und lautet:

Wie zentrierst du ein Element sowohl horizontal als auch vertikal in einem Container mit flexbox?

Die Antwortmöglichkeiten lauten:

  • display: flex; align-items: center; justify-content: center;
  • display: grid; align-content: center; justify-content: center;
  • position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);
  • margin: auto; align-items: center;

Wenn du eine Antwort hast, schreibe es doch als Antwort auf meinen Bluesky-Beitrag oder als Kommentar.


Auflösung (2.12.)

Die korrekte Antwort lautet:

Mit display: flex, align-items: center (vertikal) und justify-content: center (horizontal) wird der Inhalt im Container zentriert.