CSS akhirnya menambahkan "perataan tengah vertikal" pada 2024

• CSS akhirnya menambahkan align-content ke layout default sehingga perataan vertikal kini bisa dilakukan hanya dengan satu properti CSS
  • Versi yang mendukung: Chrome 123, Firefox 125, Safari 17.4
• Saat ini align-content tidak bekerja pada layout default (flow), sehingga harus beralih ke flexbox atau grid
  • Pada 2024, browser akhirnya mengimplementasikan align-content pada layout Flow
  • Sekarang perataan bisa dilakukan hanya dengan 1 properti CSS tanpa flexbox atau grid
  • Karena itu, tidak perlu lagi membungkus konten dengan div

Sejarah perataan vertikal

• Di browser, selama ini tidak ada cara sederhana untuk melakukan perataan vertikal

Metode 1: sel tabel

• Kewarasan (waras tidak sih?): ★★★☆☆
• Ada 4 layout utama yaitu flow (default), table, flexbox, dan grid, dan perataan konten berbeda tergantung layout
• Karena flexbox dan grid ditambahkan belakangan, pada awalnya table yang digunakan

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

Metode 2: posisi absolut

• Kewarasan: ☆☆☆☆☆
• Karena layout flow tidak membantu, dipakai posisi absolut sebagai akal-akalan

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

Metode 3: konten inline

• Kewarasan: ☆☆☆☆☆
• Layout flow tidak membantu untuk perataan konten. Ia hanya memungkinkan perataan vertikal di dalam satu baris
• Jadi bagaimana kalau kita membuat baris setinggi kontainer?

<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;  
}  

• Sangat mudah membuatnya jadi aneh

Metode 4: flexbox satu baris

• Kewarasan: ★★★☆☆
• Flexbox mulai digunakan luas setelah 20 tahun sejak web dimulai
• Dalam mode satu baris (default), baris mengisi ruang vertikal dan align-items digunakan untuk meratakan item di dalam baris

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

• Atau buat baris secara vertikal lalu gunakan justify-content untuk meratakan item

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

Metode 5: flexbox multi-baris

• Kewarasan: ★★★☆☆
• Dalam flexbox multi-baris, baris bisa diratakan dengan align-content

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

Metode 6: konten grid

• Kewarasan: ★★★★☆
• Karena grid muncul lebih belakangan, perataannya jadi agak lebih sederhana

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

Metode 7: sel grid

• Kewarasan: ★★★★☆
• align-content meratakan sel di dalam kontainer, sedangkan align-items meratakan konten di dalam sel

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

Metode 8: margin auto

• Kewarasan: ★★★☆☆
• Dalam layout flow, margin:auto bisa membuat rata tengah secara horizontal, tetapi tidak secara vertikal
• Flexbox dan grid tidak mewarisi ketidakkonsistenan ini

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

Metode 9: artikel ini pada 2024

• Kewarasan: ★★★★★
• Seharusnya browser menambahkan ini sejak awal

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

[tobesimple7]

Wah~ ada fitur seperti ini~~

[seunggi]

Hal tersulit dalam ilmu komputer - perataan tengah

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

[mongsilsushi]

Akhirnya!

[sgwanlee]

css jadi terlalu mudah, ya? wkwkwk

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

ya Tuhan, pinggiran keju

[shpkc]

Akhirnya !

[halfenif]

Sudah telat! Sudah telat! Sudah telat!

[uoayop]

Akhirnya.

[aer0700]

Senang sekali

[koyokr]

wkwkwk

[nemorize]

amin

[carnoxen]

Apakah ada risiko situs web yang sudah ada menjadi berantakan secara struktural akibat perubahan ini?

[bluekai17]

Saya juga penasaran dengan bagian ini

[ng0301]

Akhirnya!

[yatmak]

Akhirnya era Web 3.0 telah tiba.

[plaaat0102]

Komentarnya penuh kegembiraan wkwkwk..

[godppun]

Benar-benar akhirnya...

[kangkung9225]

Oh...? Harus dilakukan ya wkwk..

[qurare]

Akhirnya.

[savvykang]

WA!!!

[joyfui]

Wow!!!

[mkyoon]

Saya senang sekali!

[wedding]

Karena saya lebih sering mengembangkan aplikasi, saat membantu pengembangan web saya tanpa berpikir banyak langsung memakai flexbox dari hasil pencarian dan mengira itulah yang dimaksud dengan perataan tengah... ternyata selama ini memang belum ada ya. Kaget banget.....

[illiil1lii]

Wow!

[huiya]

Akhirnya!

[tjddnjsjo]

Menyenangkan!

[pkj3186]

Akhirnya juga!