Pemusatan di CSS

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

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 pengujian stres untuk setiap strategi pemusatan agar seimbang dan Anda dapat mengamati performanya. Pada akhirnya, saya akan mengungkapkan teknik penskoran tertinggi, serta "yang paling bernilai". Semoga Anda mendapatkan teknik dan solusi pemusatan baru.

Dering Ketahanan

Resilience Ringer adalah representasi keyakinan saya bahwa strategi pemusatan harus tangguh 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. Ditekan: penempatan di tengah harus dapat menangani perubahan 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, ditekan, diduplikasi, diedit, dan ditukar ke berbagai mode dan arah bahasa. Pusat yang andal dan tangguh, pusat yang aman.

Legenda

Kami 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 memiliki item yang dipusatkan
• Setiap turunan memiliki warna latar belakang putih sehingga Anda dapat melihat efek teknik pemusatan pada 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 meratakan turunan secara kolektif, ini adalah teknik pemusatan yang solid untuk grup 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 nostalgia dan luar biasa tentang margin: auto yang berfungsi 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)

Kontestan "fluffy center" sejauh ini adalah pesaing yang terdengar paling enak, dan merupakan satu-satunya teknik pemusatan yang sepenuhnya dimiliki elemen/turunan. Lihat batas dalam merah muda tunggal 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]

Fleksibel 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 yang 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, kode ini 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?

Setelah Anda tahu cara saya melakukannya, bagaimana cara Anda melakukannya? Mari kita diversifikasi pendekatan kita dan pelajari semua cara mem-build di web. Ikuti codelab dengan postingan ini untuk membuat contoh pemusatan Anda sendiri, seperti yang ada dalam 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