Centering Element CSS
Jujur saja, membuat elemen ke tengah itu susah. Centering element bisa dikatakan salah satu challenge yang harus Anda hadapi jika menjadi front-end developer. CSS sendiri tidak memberikan properti seperti taro-di: tengah, jadi Anda harus mencari cara sendiri jika ingin menempatkan elemen di tengah.
Di bawah ini ada beberapa cara untuk kalian terkait centering element. Anda bisa menggunakan cara yang sesuai dengan kasus Anda pribadi.
Grid Method
Cara ini menggunakan 2 element untuk parent dan childnya. Parent-nya akan menjadi grid container yang menempatkan childnya di tengah.
Flexbox Method (Justify & Align)
Cara ini juga memakai 2 element untuk parent dan child. Bedanya hanya cara tengahinnya aja yang berbeda, karena ini menggunakan flex.
Flexbox Method (Margin)
Cara ini masih tetap sama yaitu dengan menggunakan 2 element. Tapi untuk yang ini pengaturan untuk centering-nya akan ada di childnya.
Metode seperti sebenernya bisa dibilang adalah metode yang paling tua. Dengan margin: auto, jadi childnya akan rata semua margin-nya (atas, bawah, kiri, kanan). Itulah yang membuat dia akhirnya ada di posisi tengah.
Position Absolute Method
Masih menggunakan 2 element. Untuk yang satu itu parent-nya perlu non-static positioning karena childnya akan jadi absolute.
Pake cara ini, childnya bakal ditaro di tengah pake top dan left-nya. Tapi karena pake itu doang ga bakal pas, kita dorong lagi ke kiri atas 50% dari titik tengah si element.
Mudah Bukan?
Gabung dalam percakapan