Cara memusatkan `div` di CSS

Cara memusatkan elemen

• Menempatkan elemen di tengah dalam elemen induk sudah lama menjadi masalah yang rumit.
• Seiring perkembangan CSS, berbagai solusi pun tersedia, dan sekarang pilihannya jauh lebih banyak.
• Tutorial ini membantu memahami trade-off di antara berbagai pendekatan dan memberikan strategi untuk menangani perataan tengah di semua skenario.

Memusatkan dengan margin otomatis

• Saat ingin menempatkan elemen di tengah secara horizontal, kita bisa menggunakan margin dengan nilai auto.
• Lebar elemen perlu dibatasi, dan fit-content akan menyesuaikan ukuran elemen dengan isinya.
• Dengan properti margin-inline, kita bisa mengatur margin-left dan margin-right menjadi auto sekaligus.

Memusatkan dengan Flexbox

• Flexbox memberikan banyak kontrol untuk mendistribusikan kelompok item di sepanjang sumbu utama.
• Satu elemen dapat dipusatkan secara horizontal dan vertikal, dan perataan tengah tetap dipertahankan bahkan ketika elemen anak tidak muat di dalam kontainer.
• Properti flex-direction dapat digunakan untuk mengatur arah tumpukan beberapa elemen anak.

Memusatkan di dalam viewport

• Ada kalanya elemen perlu dipusatkan di dalam viewport, bukan di dalam kontainer induk.
• Dengan position: fixed dan inset: 0px, elemen dapat dipasang ke viewport, lalu margin: auto digunakan untuk memusatkannya secara horizontal dan vertikal.

Memusatkan elemen dengan ukuran yang tidak diketahui

• Saat ukuran elemen tidak diketahui secara eksplisit, fit-content dapat digunakan untuk mengecilkan elemen agar sesuai dengan isinya.

Memusatkan dengan CSS Grid

• Cara paling ringkas untuk memusatkan elemen secara horizontal dan vertikal dengan CSS Grid adalah menggunakan properti place-content: center.

Perbedaannya dengan Flexbox

• CSS Grid menggunakan algoritma layout yang berbeda, dan terkadang kompleksitas tambahannya bisa menjadi masalah.
• Flexbox menghitung persentase berdasarkan elemen induk, sedangkan CSS Grid menghitungnya berdasarkan sel grid.

Memusatkan tumpukan elemen

• Dengan CSS Grid, beberapa elemen dapat ditempatkan pada sel yang sama, sehingga elemen-elemen tersebut bertumpuk dari belakang ke depan.

Memusatkan teks

• Teks mendapat perlakuan khusus di CSS, dan dapat dipusatkan menggunakan properti text-align.

Masa depan perataan tengah

• Properti align-content juga sedang diimplementasikan dalam layout Flow, yang mengontrol perataan konten pada arah blok.

Melampaui pola-pola umum

• Dengan memahami CSS secara mendalam, kita bisa menyelesaikan masalah menggunakan intuisi alih-alih bergantung pada hafalan.

Memutuskan metode mana yang akan digunakan

• Jika ingin memusatkan satu elemen secara horizontal, kita bisa memakai strategi margin otomatis pada layout Flow.
• Untuk memusatkan UI mengambang seperti modal atau banner, kita bisa memakai layout Positioned dan margin otomatis.
• Untuk memusatkan tumpukan elemen, kita bisa memakai CSS Grid.
• Untuk memusatkan teks, kita bisa memakai text-align, dan ini dapat digunakan bersama metode lain.
• Dalam sebagian besar situasi lainnya, kita bisa memakai Flexbox. Ini adalah metode paling serbaguna untuk memusatkan satu atau beberapa elemen anak secara horizontal/vertikal.

Pendapat GN⁺

• Hal terpenting dari artikel ini adalah membantu memahami berbagai cara memusatkan elemen di CSS.
• Berkat perkembangan CSS, pekerjaan perataan tengah yang dulu rumit kini menjadi jauh lebih sederhana, dan ini sangat membantu para pengembang web.
• Memahami dan memanfaatkan teknologi CSS modern seperti Flexbox dan CSS Grid kini menjadi keterampilan penting dalam desain web dan layout.

[v08zbv8fvlkjasdflkj]

Kalau dipikir-pikir, mendadak jadi terasa mengganggu juga kalau artikel di GeekNews tidak rata tengah huhu haha

[joyfui]

Saya sering memakai place-items: center;, ternyata masih ada beberapa cara lain juga.

[GN⁺]

Opini Hacker News

• Ringkasan komentar pertama:

  • Ada berbagai pendapat tentang mengapa menempatkan elemen di tengah dengan CSS itu sulit.
  • Saat kebanyakan orang bertanya mengapa penempatan di tengah sulit, yang mereka maksud hanyalah bagaimana menempatkan satu elemen tepat di tengah elemen lain.
  • Di HTML lama, penempatan di tengah bisa dilakukan dengan mudah menggunakan tag <table>, tetapi di CSS hal ini terasa sulit.
  • Meski CSS disebut sebagai alat yang lebih baik, tetap mengecewakan karena bahkan penempatan tengah yang dasar pun tidak bisa dilakukan dengan mudah.
  • Karena alasan ini, layout tabel digunakan untuk waktu yang lama.
  • Meski begitu, CSS tetap disukai.

• Ringkasan komentar kedua:

  • Banyak orang tidak memahami kompleksitas layout dan pemformatan halaman otomatis.
  • Tidak mungkin mengabstraksikan kompleksitas ini menjadi sekadar pendekatan "lakukan sesuai yang saya mau".
  • Sebagai contoh situs web, disebutkan situs Gwern Branwen, dan pentingnya membatasi konten agar sesuai dengan gaya yang diinginkan.
  • Layout halaman web adalah proses kompleks untuk menampilkan konten sesuai dengan berbagai jenis layar.
  • CSS bisa tampak rumit bagi orang yang sejak awal memutuskan untuk membuat halaman web, tetapi sebenarnya pilihan yang tersedia sangat luas.
  • Untuk mendapatkan hasil yang diinginkan, perlu mencari alat yang tepat dan membungkus konten dalam bentuk yang sesuai.

• Ringkasan komentar ketiga:

  • Untuk memahami positioning dan penempatan tengah di CSS, pemahaman tentang box model sangat membantu.
  • Properti display dan position adalah dasar untuk mempelajari positioning.
  • MDN memiliki artikel yang berguna tentang hal ini.

• Ringkasan komentar keempat:

  • Artikelnya sangat bagus, terutama bagian interaktifnya sangat mengesankan.
  • Sudah lama menggunakan situs web yang memudahkan penempatan tengah di CSS.

• Ringkasan komentar kelima:

  • "Penempatan tengah" di CSS adalah masalah klasik.
  • CSS tidak jelas karena merupakan gabungan kompleks yang dirancang oleh beberapa komite secara bersamaan.
  • CSS hadir dalam bentuk modul-modul terpisah yang terus berubah.
  • Ini bukan cara yang diinginkan untuk mengembangkan perangkat lunak.

• Ringkasan komentar keenam:

  • Bahkan setelah puluhan tahun, CSS masih belum menawarkan cara yang seefektif menempatkan tabel di tengah.
  • Selama masa itu, penggunaan tabel untuk tujuan layout dianggap sesuatu yang memalukan.

• Ringkasan komentar ketujuh:

  • Banyak orang memiliki keluhan tentang CSS.
  • Masalah utamanya adalah instruksi style saling bertabrakan, atau gagal tanpa memberikan efek apa pun.

• Ringkasan komentar kedelapan:

  • Seperti yang disebutkan dalam artikel, Flexbox menyelesaikan masalah penempatan tengah untuk kasus sederhana.
  • Jika suatu kasus tidak bisa diselesaikan dengan Flexbox, itu karena yang dikerjakan lebih kompleks daripada sekadar penempatan tengah sederhana.

• Ringkasan komentar kesembilan:

  • Cara utama yang digunakan untuk penempatan tengah adalah position: absolute, left: 50%, transform: translateX(-50%).

• Ringkasan komentar kesepuluh:

  • Alasan berhenti dari pengembangan web adalah karena menempatkan div di tengah dengan CSS sangat sulit.