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

<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>  

Methode 2: Absolute Positionierung

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

<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>  

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?

<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.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

<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>  

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

<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>  

Methode 5: Mehrzeilige flexbox

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

<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>  

Methode 6: grid-Inhalte

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

<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>  

Methode 7: grid-Zelle

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

<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>  

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

<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>  

Methode 9: Dieser Artikel im Jahr 2024

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

<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>  

[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!