Pemusatan di CSS

Ikuti 5 teknik pemusatan saat pengujian ini dilakukan untuk mengetahui teknik mana yang paling tangguh untuk diubah.

Adam Argyle

Menempatkan di tengah dalam CSS adalah tantangan yang terkenal, penuh dengan lelucon dan ejekan. CSS tahun 2020 sudah dewasa dan sekarang kita dapat tertawa dengan santai, 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 akan dipusatkan, dll. Untuk menunjukkan alasan di balik teknik pemusatan "yang menang", saya membuat The Resilience Ringer. Ini adalah serangkaian uji stres untuk setiap strategi pemusatan yang perlu diseimbangkan dan Anda untuk mengamati performanya. Pada akhirnya, saya akan mengungkapkan teknik penskoran tertinggi, serta "yang paling bernilai". Semoga Anda mendapatkan teknik dan solusi pemusatan baru.

Dering Ketahanan

Dering Ketahanan adalah representasi 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: pemusatan harus mampu menangani perubahan pada lebar
2. Ditekan: pemusatan harus dapat menangani perubahan tinggi
3. Duplikat: pemusatan harus dinamis sesuai jumlah item
4. Edit: penempatan di tengah harus dinamis sesuai dengan panjang dan bahasa konten
5. Alur: pemusatan harus bersifat independen terhadap arah dokumen dan mode penulisan

Solusi pemenang harus menunjukkan ketahanannya dengan mempertahankan konten di tengah saat dipadatkan, dikompresi, diduplikasi, diedit, dan ditukar ke berbagai mode dan arah bahasa. Pusat yang andal 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 adalah latar belakang pada penampung yang berupaya memiliki item yang dipusatkan
• Setiap turunan memiliki warna latar belakang putih sehingga Anda dapat melihat efek teknik pensenteran terhadap ukuran kotak turunan (jika ada)

5 Kontestan

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

1. Pusat Konten

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

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Cocok untuk tata letak makro yang berisi paragraf dan judul, prototipe, atau umumnya hal-hal yang perlu dipusatkan dengan jelas.

2. Flex Lembut

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

Gentle Flex adalah strategi khusus pemusatan yang lebih akurat. Hal ini lembut dan halus, karena tidak seperti place-content: center, tidak ada ukuran kotak turunan yang diubah selama pemusatan. Semua item ditumpuk, dipusatkan, dan diberi spasi sehalus mungkin.

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

Cocok untuk tata letak makro dan mikro.

3. Autobot

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

Penampung disetel ke fleksibel 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;
}

Cocok untuk memusatkan ikon atau elemen pseudo.

4. Fluffy Center

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

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

.fluffy-center {
  padding: 10ch;
}

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

5. Pop &Plop

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

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

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

Pemenang

Jika saya berada di sebuah pulau dan hanya dapat menggunakan 1 teknik pemusatan, teknik tersebut adalah…

[drum roll]

Fleksi Lembut 🎉

.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 secara menyeluruh dengan hasil yang sesuai dengan ekspektasi saya. Selain itu, karena saya adalah pecandu ukuran intrinsik, saya cenderung beralih ke solusi ini. Memang benar, banyak 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 bagian penting dari strategi pemusatan saya. Fungsi ini sangat atomik sehingga terkadang saya lupa bahwa saya menggunakannya.

Kesimpulan

Apa saja hal yang merusak strategi pemusatan Anda? Tantangan lain apa yang dapat ditambahkan ke ringer ketahanan? Saya mempertimbangkan terjemahan dan tombol tinggi otomatis pada penampung… apa lagi?

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda akan melakukannya?! Mari kita diversifikasi pendekatan dan mempelajari semua cara untuk membangun di web. Ikuti codelab dengan postingan ini untuk membuat contoh pemusatan Anda sendiri, seperti yang ada di postingan ini. Kirimkan tweet versi Anda kepada saya, dan saya akan menambahkannya ke bagian Remix komunitas di bawah.

Remix komunitas

• CSS Tricks dengan postingan blog