Pemusatan di CSS

Ikuti 5 teknik pemusatan saat teknik tersebut menjalani serangkaian pengujian untuk melihat teknik mana yang paling tahan terhadap perubahan.

Adam Argyle

Membuat elemen berada di tengah dalam CSS adalah tantangan yang terkenal, penuh dengan lelucon dan ejekan. 2020 CSS sudah berkembang pesat dan sekarang kita bisa menertawakan lelucon itu dengan jujur, bukan dengan gigi terkatup.

Jika Anda lebih suka video, berikut versi YouTube dari postingan ini:

Tantangan

Ada berbagai jenis pemusatan. Dari berbagai kasus penggunaan, jumlah hal yang harus dipusatkan, dll. Untuk menunjukkan alasan di balik teknik pemusatan "yang menang", saya membuat The Resilience Ringer. Ini adalah serangkaian uji ketahanan untuk setiap strategi pemusatan agar seimbang dan Anda dapat mengamati performanya. Pada akhirnya, saya akan mengungkapkan teknik dengan skor tertinggi, serta teknik "paling berharga". Semoga Anda mendapatkan teknik dan solusi pemusatan baru.

The Resilience Ringer

Resilience Ringer adalah representasi dari keyakinan saya bahwa strategi pemusatan harus tahan terhadap tata letak internasional, area pandang berukuran variabel, pengeditan teks, dan konten dinamis. Prinsip-prinsip ini membantu membentuk pengujian ketahanan berikut agar teknik pemusatan dapat bertahan:

  1. Squished: centering should be able to handle changes to width
  2. Squashed: pemusatan harus dapat menangani perubahan tinggi
  3. Duplikat: pemusatan harus dinamis terhadap jumlah item
  4. Edit: pemusatan harus dinamis terhadap panjang dan bahasa konten
  5. Flow: pemusatan harus agnostik terhadap arah dokumen dan mode penulisan

Solusi yang menang harus menunjukkan ketahanannya dengan menjaga konten tetap di tengah saat dipersempit, diperkecil, diduplikasi, diedit, dan ditukar ke berbagai mode dan arah bahasa. Pusat yang tepercaya dan tangguh, pusat yang aman.

Legend

Kami telah memberikan beberapa petunjuk warna visual untuk membantu Anda mempertahankan beberapa informasi meta dalam konteks:

  • Batas merah muda menunjukkan kepemilikan gaya pemusatan
  • Kotak abu-abu adalah latar belakang pada penampung yang berupaya memiliki item di tengah
  • Setiap turunan memiliki warna latar belakang putih sehingga Anda dapat melihat efek apa pun yang dimiliki teknik pemusatan pada ukuran kotak turunan (jika ada)

5 kontestan

5 teknik pemusatan perhatian memasuki Resilience Ringer, hanya satu yang akan menerima Resilience Crown 👸.

1. Pusat Konten

Mengedit dan menduplikasi konten dengan VisBug
  1. Squish: bagus!
  2. Squash: bagus!
  3. Duplikat: bagus.
  4. Edit: bagus.
  5. Alur: bagus!

Akan sulit untuk mengalahkan keringkasan display: grid dan singkatan place-content. Karena memusatkan dan meratakan turunan secara kolektif, teknik ini merupakan teknik pemusatan yang solid untuk grup elemen yang dimaksudkan untuk dibaca.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Kelebihan
  • Konten dipusatkan bahkan dalam ruang terbatas dan overflow
  • Pemusatan pengeditan dan pemeliharaan semuanya ada di satu tempat
  • Gap menjamin jarak yang sama di antara n turunan
  • Petak membuat baris secara default
Kekurangan
  • Elemen turunan terlebar (max-content) menetapkan lebar untuk semua elemen lainnya. Hal ini akan dibahas lebih lanjut di Fleksibilitas Lembut.

Cocok untuk tata letak makro yang berisi paragraf dan judul, prototipe, atau hal-hal yang umumnya memerlukan pemusatan yang jelas.

2. Gentle Flex

  1. Squish: bagus!
  2. Squash: bagus.
  3. Duplikat: bagus!
  4. Edit: bagus.
  5. Flow: Bagus.

Gentle Flex adalah strategi yang lebih berfokus hanya pada pemusatan. Transisinya halus dan lembut, karena tidak seperti place-content: center, tidak ada ukuran kotak turunan yang diubah selama pemusatan. Semua item ditumpuk, dipusatkan, dan diberi jarak selembut mungkin.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Kelebihan
  • Hanya menangani perataan, arah, dan distribusi
  • Pengeditan dan pemeliharaan semuanya ada di satu tempat
  • Gap menjamin jarak yang sama di antara n turunan
Kekurangan
  • Sebagian besar baris kode

Cocok untuk tata letak makro dan mikro.

3. Autobot

  1. Squish: bagus
  2. Squash: bagus
  3. Duplikat: denda
  4. Edit: bagus
  5. Alur: bagus

Penampung ditetapkan ke flex tanpa gaya perataan, sedangkan turunan langsung diberi gaya dengan margin otomatis. Ada sesuatu yang bernostalgia dan luar biasa tentang margin: auto yang bekerja di semua sisi elemen.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Kelebihan
  • Trik seru
  • Cepat dan kotor
Kekurangan
  • Hasil yang tidak rapi saat terjadi overflow
  • Mengandalkan distribusi, bukan celah, berarti tata letak dapat terjadi dengan turunan yang saling bersentuhan
  • "Didorong" ke posisinya tidak terlihat optimal dan dapat mengakibatkan perubahan pada ukuran kotak turunan

Sangat cocok untuk memosisikan ikon atau elemen semu di tengah.

4. Fluffy Center

  1. Squish: buruk
  2. Squash: buruk
  3. Duplikat: buruk
  4. Edit: bagus.
  5. Flow: Bagus. (selama Anda menggunakan properti logis)

Kontestan "fluffy center" sejauh ini merupakan kontestan yang terdengar paling lezat, dan merupakan satu-satunya teknik pemusatan yang sepenuhnya dimiliki oleh elemen/turunan. Lihat batas merah muda bagian dalam kami yang unik!?

.fluffy-center {
  padding: 10ch;
}
Kelebihan
  • Melindungi konten
  • Atom
  • Setiap tes diam-diam berisi strategi pemusatan ini
  • Word space is gap
Kekurangan
  • Ilusi tidak berguna
  • Ada benturan antara penampung dan item, tentu saja karena masing-masing sangat tegas dalam menentukan ukurannya

Cocok untuk pemusatan yang berfokus pada kata atau frasa, tag, pil, tombol, chip, dan lainnya.

5. Pop & Plop

  1. Squish: oke
  2. Squash: oke
  3. Duplikat: buruk
  4. Edit: fine
  5. Aliran: baik

Elemen ini "muncul" karena pemosisian absolut memunculkan elemen dari flow normal. Bagian "plop" dari nama tersebut berasal dari saat saya merasa paling berguna: menempatkannya di atas hal lain. Ini adalah teknik pemusatan overlay klasik dan praktis yang fleksibel dan dinamis terhadap ukuran konten. Terkadang Anda hanya perlu menempatkan UI di atas UI lain.

Kelebihan
  • Berguna
  • Andal
  • Saat Anda membutuhkannya, fitur ini sangat berharga
Kekurangan
  • Kode dengan nilai persentase negatif
  • Memerlukan position: relative untuk memaksa blok penampung
  • Jeda baris yang terlalu awal dan aneh
  • Hanya boleh ada 1 per blok penampung tanpa upaya tambahan

Cocok untuk modal, toast dan pesan, stack dan efek kedalaman, popover.

Pemenang

Jika saya berada di sebuah pulau dan hanya bisa memiliki 1 teknik pemusatan, teknik itu adalah…

[drum roll]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Anda selalu dapat menemukannya di stylesheet saya karena berguna untuk tata letak makro dan mikro. Solusi ini sangat andal dan memberikan hasil yang sesuai dengan harapan saya. Selain itu, karena saya adalah penggemar ukuran intrinsik, saya cenderung beralih ke solusi ini. Memang, ada banyak hal yang harus diketik, tetapi manfaat yang diberikannya lebih besar daripada kode tambahan.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center sangat kecil sehingga mudah diabaikan sebagai teknik pemusatan, tetapi ini adalah elemen penting dari strategi pemusatan saya. Sangat atomik sehingga terkadang saya lupa bahwa saya menggunakannya.

Kesimpulan

Hal apa saja yang dapat mengganggu strategi pemusatan Anda? Tantangan apa lagi yang bisa ditambahkan ke dalam uji ketahanan? Saya mempertimbangkan terjemahan dan tombol tinggi otomatis pada penampung… apa lagi!?

Setelah tahu cara saya melakukannya, bagaimana cara Anda melakukannya? Mari kita diversifikasi pendekatan kita dan pelajari semua cara untuk membangun di web. Ikuti codelab dengan postingan ini untuk membuat contoh pemusatan Anda sendiri, seperti yang ada dalam postingan ini. Tweet saya versi Anda, dan saya akan menambahkannya ke bagian Remix komunitas di bawah.

Remix komunitas