CSS: 2024 kommt endlich „vertikale Zentrierung“ hinzu

• CSS unterstützt endlich align-content im Standard-Layout, sodass vertikale Ausrichtung mit nur einer einzigen CSS-Eigenschaft möglich wird
  • Unterstützte Versionen: Chrome 123, Firefox 125, Safari 17.4
• Derzeit funktioniert align-content im Standard-Layout (flow) nicht, sodass man auf flexbox oder grid umstellen muss
  • 2024 implementieren Browser endlich align-content für das Flow-Layout
  • Jetzt ist die Ausrichtung ohne flexbox oder grid mit nur einer einzigen CSS-Eigenschaft möglich
  • Deshalb muss der Inhalt nicht mehr in ein div eingewickelt werden

Geschichte der vertikalen Ausrichtung

• In Browsern gab es lange keine einfache Methode für vertikale Ausrichtung

Methode 1: Tabellenzelle

• Sanity (seid ihr noch bei Verstand?): ★★★☆☆
• Es gibt vier wichtige Layouts: flow (Standard), table, flexbox und grid; die Ausrichtung von Inhalten unterscheidet sich je nach Layout
• Da flexbox und grid erst spät hinzugekommen sind, wurde anfangs table verwendet

    Content.

Methode 2: Absolute Positionierung

• Sanity: ☆☆☆☆☆
• Weil das Flow-Layout nicht hilft, weicht man mit absoluter Positionierung aus

    Content.

Methode 3: Inline-Inhalte

• Sanity: ☆☆☆☆☆
• Das Flow-Layout hilft bei der Ausrichtung von Inhalten nicht. Es erlaubt vertikale Ausrichtung innerhalb einer einzelnen Zeile
• Was wäre also, wenn man eine Zeile in Höhe des Containers erzeugt?

  ::before
  Content.

.container::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.content {
  display: inline-block;
  vertical-align: middle;
}

• Das kann leicht seltsam werden

Methode 4: Einzeilige flexbox

• Sanity: ★★★☆☆
• Flexbox wurde erst 20 Jahre nach dem Start des Webs breit eingesetzt
• Im einzeiligen Modus (Standard) füllt die Zeile den vertikalen Raum, und mit align-items werden Elemente innerhalb der Zeile ausgerichtet

  Content.

• Oder man macht die Zeilen vertikal und richtet die Elemente mit justify-content aus

  Content.

Methode 5: Mehrzeilige flexbox

• Sanity: ★★★☆☆
• In mehrzeiliger flexbox lassen sich Zeilen mit align-content ausrichten

  Content.

Methode 6: grid-Inhalte

• Sanity: ★★★★☆
• Da grid noch später kam, wurde die Ausrichtung etwas einfacher

  Content.

Methode 7: grid-Zelle

• Sanity: ★★★★☆
• align-content richtet Zellen im Container aus, align-items richtet Inhalte in den Zellen aus

  Content.

Methode 8: auto-Margin

• Sanity: ★★★☆☆
• Im Flow-Layout sorgt margin:auto horizontal für Zentrierung, aber nicht vertikal
• flexbox und grid teilen diese Unvernunft nicht

    Content.

Methode 9: Dieser Artikel im Jahr 2024

• Sanity: ★★★★★
• Eigentlich hätten Browser das von Anfang an hinzufügen sollen

  align-content just works!

[tobesimple7]

Wow~ So eine Funktion~~

[seunggi]

Das Schwierigste an der Informatik – Zentrierung

https://tonsky.me/blog/centering/

[mongsilsushi]

Endlich!

[sgwanlee]

Ist CSS jetzt viel zu einfach geworden? hahaha

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

oh mein Gott, Käserand

[shpkc]

Endlich!

[halfenif]

Zu spät! Zu spät! Zu spät!

[uoayop]

Endlich.

[aer0700]

Das freut mich.

[koyokr]

Hahaha

[nemorize]

a-men

[carnoxen]

Besteht das Risiko, dass bestehende Websites durch diese Änderung strukturell durcheinandergeraten?

[bluekai17]

Ich bin darauf auch neugierig.

[ng0301]

Endlich!

[yatmak]

Endlich ist das Zeitalter von Web 3.0 angebrochen.

[plaaat0102]

Die Kommentare sind voller Freude, hahaha..

[godppun]

Wirklich, endlich ...

[kangkung9225]

Oh …? Muss man das machen, haha ..

[qurare]

Endlich.

[savvykang]

WOW!!!

[joyfui]

Wow!!!

[mkyoon]

Ich bin glücklich!

[wedding]

Da ich hauptsächlich Apps entwickle, habe ich, wenn ich mal bei der Webentwicklung geholfen habe, gedankenlos das erstbeste Flexbox-Beispiel aus der Suche verwendet und angenommen, dass das eben Zentrierung sei ... Ich bin schockiert, dass es das bisher gar nicht gab ...

[illiil1lii]

Muhahaha!

[huiya]

Endlich!

[tjddnjsjo]

Großartig!

[pkj3186]

Endlich!