Pemusatan di CSS

Ikuti 5 teknik pemusatan saat mereka 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 dewasa dan sekarang kita bisa menertawakan lelucon itu dengan jujur, bukan dengan gigi terkatup.

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

Tantangan

Ada berbagai jenis penataan di tengah. Mulai dari kasus penggunaan yang berbeda, jumlah item yang akan dipusatkan, dll. Untuk mendemonstrasikan alasan di balik teknik pemusatan "yang berhasil", saya membuat The Resilience Ringer. Ini adalah serangkaian uji tekanan untuk setiap strategi pemusatan guna menyeimbangkan dalam dan Anda untuk mengamati performanya. Pada akhirnya, saya akan mengungkapkan teknik dengan skor tertinggi, serta teknik yang "paling berharga". Semoga Anda mendapatkan teknik dan solusi baru untuk memusatkan elemen.

The Resilience Ringer

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 ini membantu membentuk pengujian ketahanan berikut untuk teknik pemusatan agar dapat bertahan:

1. Diperas: pemusatan harus dapat menangani perubahan lebar
2. Diperkecil: penengahan harus dapat menangani perubahan tinggi
3. Duplikat: pemusatan harus dinamis terhadap jumlah item
4. Edit: pemusatan harus dinamis terhadap panjang dan bahasa konten
5. Alur: penempatan di tengah tidak bergantung pada arah dokumen dan mode penulisan

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

Legenda

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

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

5 Kontestan

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

1. Pusat Konten

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

Akan sulit untuk mengalahkan ringkasnya display: grid dan singkatan place-content. Karena memusatkan dan menyejajarkan anak-anak secara kolektif, teknik pemusatan ini sangat cocok untuk kelompok elemen yang dimaksudkan untuk dibaca.

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

Bagus untuk tata letak makro yang berisi paragraf dan judul, prototipe, atau hal-hal yang umumnya memerlukan pemusatan yang mudah dibaca.

2. Gentle Flex

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

Gentle Flex adalah strategi yang lebih akurat untuk memusatkan saja. Lembut dan halus, karena tidak seperti place-content: center, tidak ada ukuran kotak turunan yang diubah selama pemusatan. Semua item ditumpuk, dipusatkan, dan diberi jarak dengan serapi mungkin.

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

Sangat cocok untuk tata letak makro dan mikro.

3. Autobot

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

Penampung disetel ke flex tanpa gaya perataan, sementara turunan langsung diberi gaya dengan margin otomatis. Ada sesuatu yang nostalgia dan indah tentang margin: auto bekerja di semua sisi elemen.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Sangat cocok untuk memusatkan ikon atau elemen semu.

4. Pusat Fufi

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

"Fluffy center" adalah kontestan yang terdengar paling lezat, dan merupakan satu-satunya teknik pemusatan yang sepenuhnya dimiliki elemen/turunan. Lihat batas merah muda dalam kami yang berdiri sendiri!?

.fluffy-center {
  padding: 10ch;
}

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

5. Pop & Plop

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

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

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

Pemenang

Jika saya berada di sebuah pulau dan hanya dapat memiliki 1 teknik pemusatan, teknik tersebut 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. Ini adalah solusi tepercaya yang menyeluruh dengan hasil yang sesuai dengan ekspektasi saya. Selain itu, karena saya sangat menyukai ukuran intrinsik, saya cenderung beralih ke solusi ini. Memang, ada banyak yang harus diketik, tetapi manfaat yang diberikannya lebih besar daripada kode tambahan tersebut.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Pusat Fluffy sangat kecil sehingga mudah diabaikan sebagai teknik pemusatan, tetapi merupakan bagian penting dari strategi pemusatan saya. Sangat atomik sehingga terkadang saya lupa bahwa saya menggunakannya.

Kesimpulan

Apa saja jenis hal yang merusak strategi penataan di tengah Anda? Tantangan lain apa yang dapat ditambahkan ke dering ketahanan? Saya mempertimbangkan terjemahan dan peralihan tinggi otomatis pada penampung… apa lagi?

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda?! 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

• CSS Tricks dengan postingan blog