Pemusatan di CSS

Ikuti 5 teknik pemusatan saat mereka melalui serangkaian pengujian untuk mengetahui teknik mana yang paling tangguh untuk diubah.

Adam Argyle

Berfokus pada CSS adalah tantangan yang terkenal, penuh dengan lelucon dan ejekan. 2020 CSS sudah dewasa dan sekarang kita bisa menertawakan lelucon itu, bukan melalui gigi menggenggam.

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

Tantangan

Ada berbagai jenis pemusatan perhatian. Dari berbagai kasus penggunaan, ke tengah, dll. Untuk menunjukkan alasan di balik "kemenangan" teknik pemusatan, saya menciptakan The Resilience Ringer. Ini adalah serangkaian uji daya tahan untuk setiap pemusatan untuk menyeimbangkannya dan Anda untuk mengamati kinerja mereka. Di bagian akhir, saya mengungkap teknik penilaian tertinggi, serta "paling berharga". Semoga Anda mendapatkan teknik dan solusi pemusatan yang baru.

Pendering Ketahanan

Ringer Ketahanan adalah representasi dari keyakinan saya bahwa pemusatan harus tahan terhadap tata letak internasional, area pandang berukuran variabel, pengeditan teks, dan saat ini. Prinsip-prinsip ini membantu membentuk tes resiliensi berikut untuk orang-orang yang yang dapat diselesaikan:

  1. Dipadatkan: pemusatan harus dapat menangani perubahan lebar
  2. Dipadatkan: pemusatan harus mampu menangani perubahan tinggi
  3. Duplikat: pemusatan (pemusatan) harus dinamis terhadap jumlah item
  4. Mengedit: pemusatan harus dinamis terhadap panjang dan bahasa konten
  5. Alur: pemusatan harus bersifat agnostik mode penulisan dan arah dokumen

Solusi yang unggul harus menunjukkan ketangguhannya dengan menjaga konten tetap tengah ketika ditekan, ditumpuk, diduplikasi, diedit, dan diganti menjadi berbagai mode dan arah bahasa. Pusat yang tepercaya dan tangguh, pusat yang aman.

Legenda

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

  • Batas merah muda menunjukkan kepemilikan gaya pemusatan
  • Kotak abu-abu merupakan latar belakang container yang bertujuan untuk menempatkan item
  • Setiap anak memiliki warna latar belakang putih sehingga Anda dapat melihat efek apa pun yang yang dimiliki teknik pemusatan pada ukuran kotak turunan (jika ada)

5 Kontestan

5 teknik pemusatan masuk ke Dering 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 dipusatkan dan membenarkan anak-anak secara kolektif, itu adalah teknik pemusatan yang solid untuk kelompok elemen yang dimaksudkan untuk dibaca.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Kelebihan
  • Konten dipusatkan bahkan dalam ruang yang terbatas dan kelebihan
  • Pengeditan dan pemeliharaan terpusat di satu tempat
  • Kesenjangan menjamin jarak yang sama di antara n turunan
  • Petak membuat baris secara default
Kekurangan
  • Turunan terlebar (max-content) menetapkan lebar lainnya. Ini akan menjadi bahas selengkapnya di Gentle Flex.

Cocok untuk tata letak makro yang berisi paragraf dan judul, prototipe, atau pada umumnya hal-hal yang perlu dibaca di tengah.

2. Flex Lembut

  1. Squish: bagus!
  2. Squash: bagus!
  3. Duplikat: bagus!
  4. Mengedit: bagus!
  5. Alur: bagus!

Gentle Flex adalah strategi yang hanya pemusatan atau pemusatan yang lebih sesungguhnya. Lembut dan lembut, karena tidak seperti place-content: center, tidak ada ukuran kotak anak-anak yang berubah selama . Selembut mungkin, semua item ditumpuk, dipusatkan, dan diberi jarak.

.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 ada di satu tempat
  • Kesenjangan menjamin jarak yang sama di antara n turunan
Kekurangan
  • Sebagian besar baris kode

Cocok untuk tata letak makro dan mikro.

3. Bot otomatis

  1. Squish: bagus
  2. Squash: bagus
  3. Duplikat: baik
  4. Mengedit: bagus
  5. Alur: bagus

Penampung disetel agar fleksibel tanpa gaya perataan, sedangkan turunan langsung diberi gaya dengan margin otomatis. Ada sesuatu yang bernostalgia dan menakjubkan tentang margin: auto berfungsi di semua sisi elemen.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Kelebihan
  • Trik seru
  • Cepat dan kotor
Kekurangan
  • Hasil yang tidak jelas saat melebihi batas
  • Mengandalkan distribusi, bukan kesenjangan, tata letak dapat terjadi pada turunan menyentuh sisi
  • Sedang "didorong" ke posisi tampaknya tidak optimal dan dapat menyebabkan perubahan ke ukuran kotak anak

Cocok untuk memusatkan ikon atau elemen pseudo.

4. Pusat Fluffy

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

Kontestan "pusat halus" sejauh ini adalah pesaing terlezat kami, dan merupakan satu-satunya pemusatan yang sepenuhnya dimiliki oleh elemen/turunan. Lihat warna merah muda untuk solo batas!?

.fluffy-center {
  padding: 10ch;
}
Kelebihan
  • Melindungi konten
  • Atom
  • Setiap pengujian diam-diam berisi strategi pemusatan ini
  • Spasi kata adalah kesenjangan
Kekurangan
  • Ilusi tidak berguna
  • Ada konflik antara wadah dan item, secara alami karena masing-masing bersikap sangat tegas tentang ukuran produk

Cocok untuk pemusatan yang berpusat pada kata atau frasa, tag, tablet, tombol, chip, dan lainnya.

5. Pop & Kocok

  1. Squish: oke
  2. Squash: oke
  3. Duplikat: buruk
  4. Edit: baik
  5. Alur: baik-baik saja

"Pop-up" ini karena pemosisian absolut membuat elemen keluar dari normal alur kerja. "Plot" sebagian dari nama-nama itu berasal dari waktu yang menurut saya paling berguna: menimpanya di atas benda lain. Ini adalah pemusatan overlay yang klasik dan praktis yang fleksibel dan dinamis sesuai ukuran konten. Terkadang Anda hanya perlu untuk menempatkan UI di atas UI lain.

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

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

Pemenang

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

[alat 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 ini berguna untuk fungsi makro dan tata letak mikro. Ini adalah solusi andal yang menyeluruh dengan hasil yang sesuai dengan ekspektasi perusahaan. Selain itu, karena saya pecandu ukuran intrinsik, saya cenderung lulus ke dalam solusi ini. Benar, banyak hal yang harus diketik, tetapi manfaatnya lebih besar daripada kode ekstra.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center sangat mikro sehingga mudah diabaikan sebagai teknik pemusatan, tapi itu adalah pokok strategi pemusatan saya. Hal ini sangat atomik sehingga terkadang saya lupa saya menggunakannya.

Kesimpulan

Hal apa yang merusak strategi pemusatan Anda? Tantangan lain apa saja dapat ditambahkan ke ringer ketahanan? Saya mempertimbangkan penerjemahan dan tinggi otomatis di penampung... apa lagi!?

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda akan melakukannya?! Mari kita mendiversifikasi pendekatan dan mempelajari berbagai cara untuk membangun di web. Ikuti codelab dengan postingan ini untuk buat contoh pemusatan Anda sendiri, seperti yang ada di postingan ini. Tweet me versi Anda, dan saya akan menambahkannya ke Bagian Remix komunitas di bawah.

Remix komunitas