Mengatur Posisi Elemen Menjadi Ke Tengah Secara Horizontal

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan satu trik tentang html css.

Pada trik kali ini saya akan menggunakan position absolute dan relative jika kalian belum paham bisa lihat postingan berikut yang berjudul Pengertian Position Relative dan Position Absolute.

Jika kalian sudah paham tentang position absolute dan relative mari kita lanjutkan dengan trik ini.

Pada tutorial ini akan saya berikan cara untuk membuat konten menjadi tepat di tengah secara horizontal ketika menggunakan position seperti berikut.

Pertama kita buat dahulu struktur html sederhana seperti dibawah ini

Selanjutnya kita buat CSS seperti berikut

Pada css diatas saya memberikan property transform: translateX(-50%) dimana property tersebut berguna untuk menggeser objek 50% x Lebar Objek ke kiri dari posisi seharusnya dan saya juga memberikan left:50% untuk menggeser objek ke tengah pembungkusnya.

Jika sudah coba kalian test di browser, maka akan terlihat seperti ini.

Baiklah teman-teman, demikian artikel kali ini yang membahas tentang cara mengatur elemen menjadi ke tengah secara horizontal. Semoga bermanfaat