Pemusatan di CSS

Ikuti 5 teknik pemusatan saat mereka menjalani serangkaian pengujian untuk melihat teknik mana yang paling tangguh untuk diubah.

Adam Argyle

Centering di CSS adalah tantangan terkenal, penuh dengan lelucon dan ejekan. 2020 CSS sudah dewasa dan sekarang kita bisa menertawakan lelucon itu dengan jujur, bukan dengan menggigit gigi.

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

Tantangan

Ada berbagai jenis pemusatan. Mulai dari kasus penggunaan yang berbeda, jumlah hal yang dipusatkan, dll. Untuk menunjukkan alasan di balik teknik pemusatan "kemenangan", saya membuat The Resilience Ringer. Ini adalah serangkaian uji stres untuk setiap strategi pemusatan yang harus diseimbangkan di dalamnya, dan Anda harus mengamati performanya. Di bagian akhir, saya akan mengungkap teknik skor tertinggi, serta "yang paling berharga". Semoga Anda mendapatkan teknik dan solusi pemusatan yang baru.

Pendering Ketahanan

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

  1. Diciutkan: pemusatan harus dapat menangani perubahan pada lebar
  2. Diremas: pemusatan harus dapat menangani perubahan tinggi
  3. Duplicate: pemusatan harus dinamis terhadap jumlah item
  4. Edit: pemusatan harus dinamis untuk menyesuaikan durasi dan bahasa konten
  5. Flow: pemusatan harus berupa arah dokumen dan agnostik mode penulisan

Solusi yang unggul harus menunjukkan ketahanannya dengan menjaga konten tetap berada di tengah sambil dikecilkan, diciutkan, diduplikasi, diedit, dan ditukar ke berbagai mode dan arah bahasa. Pusat yang tepercaya dan tangguh, pusat yang aman.

Legenda

Saya telah memberikan beberapa petunjuk warna visual untuk membantu Anda menjaga beberapa informasi meta dalam konteks:

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

5 Kontestan

5 teknik pemusatan masuk ke Pendering Ketahanan, hanya satu yang akan menerima Mahkota Ketahanan 👸.

1. Pusat Konten

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

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Kelebihan
  • Konten ditempatkan di tengah bahkan dalam ruang terbatas dan overflow
  • Pusat edit dan pemeliharaan semuanya berada di satu tempat
  • Kesenjangan menjamin jarak yang sama untuk n turunan
  • Petak membuat baris secara default
Kekurangan
  • Turunan terluas (max-content) menetapkan lebar untuk semua turunan lainnya. Hal ini akan dibahas lebih lanjut di Gentle Flex.

Sangat cocok untuk tata letak makro yang berisi paragraf dan judul, prototipe, atau hal-hal yang secara umum memerlukan pemusatan yang jelas.

2. Flex Lembut

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

Gentle Flex adalah strategi khusus pemusatan yang lebih benar. Teks ini lembut dan lembut karena tidak seperti place-content: center, tidak ada ukuran kotak turunan yang berubah selama pemusatan. Semua item ditumpuk, berada di tengah, dan diletakkan berjauhan.

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

Sangat cocok untuk tata letak makro dan mikro.

3. Autobot

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

Penampung disetel ke fleksibel tanpa gaya perataan, sedangkan turunan langsung diberi gaya dengan margin otomatis. Ada sesuatu yang nostalgia dan menakjubkan tentang margin: auto yang mengerjakan semua sisi elemen.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Kelebihan
  • Trik seru
  • Cepat dan kotor
Kekurangan
  • Hasil canggung saat melebihi batas
  • Ketergantungan pada distribusi, bukan kesenjangan berarti tata letak dapat terjadi dengan sisi yang menyentuh turunan
  • Didorong ke posisi tidak optimal dan dapat mengakibatkan perubahan pada ukuran kotak turunan

Sangat cocok untuk memusatkan ikon atau elemen pseudo.

4. Fluffy Center

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

"Pusat fluffy" kontestan sejauh ini adalah pesaing kami yang terdengar terlezat, dan merupakan satu-satunya teknik pemusatan yang sepenuhnya dimiliki oleh elemen/anak. Lihat batas merah muda solo kita!?

.fluffy-center {
  padding: 10ch;
}
Kelebihan
  • Melindungi konten
  • Atom
  • Setiap pengujian secara diam-diam berisi strategi pemusatan ini
  • Ruang kata adalah spasi
Kekurangan
  • Ilusi tentang tidak adanya manfaat
  • Ada benturan antara kontainer dan item, secara alami karena masing-masing sangat tegas tentang ukurannya

Sangat cocok untuk pemusatan yang berpusat pada kata atau frasa, tag, pil, tombol, chip, dan lainnya.

5. Musik Pop & Plop

  1. Squish: oke
  2. Skuas: oke
  3. Duplikat: buruk
  4. Mengedit: baik
  5. Flow: baik-baik saja

Ini "muncul" karena pemosisian absolut memunculkan elemen dari alur normal. Bagian "{i>plop<i}" berasal dari nama yang saya anggap paling berguna: meletakkannya di atas hal-hal lain. Ini adalah teknik pemusatan overlay yang klasik dan praktis serta fleksibel dan dinamis untuk ukuran konten. Terkadang Anda hanya perlu menempatkan UI di atas UI lainnya.

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

Sangat cocok untuk modal, toast dan pesan, stack dan efek kedalaman, serta popover.

Pemenang

Jika aku berada di sebuah pulau dan hanya bisa memiliki 1 teknik pemusatan, itu adalah...

[lemparan drum]

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. Ini adalah solusi andal yang menyeluruh dengan hasil yang sesuai dengan harapan saya. Selain itu, karena saya seorang pecinta ukuran intrinsik, saya cenderung lulus ke dalam solusi ini. Benar, ada banyak hal yang harus diketik, tetapi manfaatnya 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 inti strategi pemusatan saya. Ukurannya yang sangat kecil sehingga kadang-kadang saya lupa menggunakannya.

Kesimpulan

Apa saja yang merusak strategi pemusatan Anda? Tantangan apa lagi yang dapat ditambahkan ke {i>resilience ringer<i}? Saya mempertimbangkan penerjemahan dan tombol tinggi otomatis pada penampung... apa lagi!?

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

Remix komunitas