[Tips & Tricks of CSS] 6 Cara Menengahkan Elemen Dengan CSS

image from unsplash

Sebagian besar Web Developer pasti masih ada yang bingung untuk membuat sebuah elemen berada di tengah-tengah halaman web.

Assalamualaikum, wr. wb. welcome back to my channel gaes. Kali ini saya akan share beberapa trik untuk membuat sebuah elemen atau item menjadi berada di tengah. Ada enam cara untuk melakukan hal tersebut hanya dengan menggunakan CSS saja. Dan berikut adalah beberapa cara yang saya ketahui.

1. Menggunakan Text-Align

Cara pertama ini mungkin sering diimplementasikan pada saat ingin menengahkan sebuah teks judul artikel maupun halaman. Namun siapa sangka bahwa kita juga dapat menggunakannya untuk menengahkan sebuah elemen atau sebut saja <div>. Cara ini akan menegahkan elemen secara horizontal. Berikut adalah langkah-langkah implementasinya:

• Buat dua <div>, yang pertama sebagai parent dan yang kedua sebagai child-nya.
• Bagian <div> yang pertama biasa menggunakan kelas container dan <div> yang kedua kita beri nama kelas box.
• Pada kelas container tambahkan text-align: center. Ini berguna untuk menengahkan elemen child-nya / kelas box.
• Tambahkan properti tinggi, lebar, serta warna pada kelas box sesuai keinginan kalian.
• Terakhir buat position-nya menjadi inline-block agar dapat ditengahkan. Karena default position-nya adalah block, sehingga akan mengisi space dari kiri halaman atau dengan kata lain tidak bisa dipengaruhi oleh text-align tersebut.

2. Menggunakan Margin

Cara kedua ini sering dipakai untuk menengahkan sebuah konten halaman. Sama seperti cara pertama, cara ini menengahkan secara horizontal. Langsung saja kita lihat caranya sebagai berikut:

• Buat tag <div> dengan nama kelas box.
• Kemudian pada CSS-nya, atur tinggi, lebar, dan warnanya.
• Terakhir tambahkan margin: 0 auto. Ini akan membuat elemen kita menjadi berada ditengah secara horizontal. Nilai 0 akan membuat margin top dan bottom menjadi 0px. Kalian bisa mengatur dengan nilai lain sesuai kebutuhan. Sedangkan nilai auto akan mengatur secara otomatis margin-left dan margin-right agar elemen berada di tengah.

3. Menggunakan Absolute Position

Dengan menggunakan absolute position kita dapat mengatur posisi elemen dimanapun kita mau tanpa terpengaruh oleh posisi elemen lain. Lalu bagaimana cara menengahkan elemen dengan cara ini.

• Pertama buat elemen box seperti pada kedua cara sebelumnya.
• Kemudian tambahkan position: absolute pada style CSS-nya.
• Tambahkan left: 50%.
• Terakhir tambahkan margin-left sebesar setengah dari lebar box. Sebagai contoh disini saya kasih lebar box 100px, jadi atur margin-left menjadi 50px.

4. Menggunakan Transform dan Translate

Dari tadi kita sudah membuat elemen menengah secara horizontal, namun bagaimana jika kita ingin membuat elemen benar-benar di tengah secara horizontal dan vertikal. Maka inilah caranya:

• Seperti biasa buat elemen box-nya dulu dan atur ukuran serta warnanya.
• Tambahkan position: absolute.
• Atur left dan top menjadi 50%.
• Terakhir tambahkan transform: translate(-50%, -50%). Zimsalabim, elemen box kalian akan berada di tengah-tengah halaman.

5. Menggunakan Flexbox

Cara kelima ini juga akan membuat elemen menjadi berada di tengah baik secara horizontal maupun vertikal. Hampir sama dengan cara pertama, kita butuh dua kelas div untuk mewujudkan ini.

• Buat kelas div container dan box.
• Atur ukuran dan warna box seperti biasa.
• Atur html, body dan container menjadi height: 100%.
• Tambahkan display: flex pada container. Ini akan membuat web kita responsive.
• Terakhir tambahkan justify-content dan align-items pada container. Justify-content akan membuat elemen berada di tengah secara horizontal. dan align-items akan membuat elemen berada di tengah secara vertikal.

6. Di Tengah Secara Vertikal

Cara terakhir ini akan membuat elemen berada di tengah secara vertikal. Caranya tambahkan style pada kelas box berupa top: 50% dan transform:translate(0, -50%). Dan terakhir atur position-nya menjadi absolute.

Oke sekian sharing pembelajaran kita kali ini, semoga bermanfaat, jangan lupa follow dan share jika berkenan.

Buat kalian yang suka UI/UX bisa follow akun instagram saya di @jauhardev Terimakasih, Wassalamualaikum, wr. wb.

KLIK DISINI

Referensi

CSS: centering things

How to Center Things With Style in CSS