Centering Element Dengan 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.

So, 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.

/* Parent */
.pake-grid {
  display: grid;
  place-content: center;
}

/* Child-nya tidak perlu diubah lagi */

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.

/* Parent */
.pake-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Childnya tidak perlu diubah juga */

**Baca Juga : ** CSS Grid vs Flexbox

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.

/* Parent */
.parent {
  display: flex;
}

/* Child */
.parent > * {
  margin: auto;
}

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 posisitengah.

Position Absolute Method

Masih menggunakan 2 element. Untuk yang satu itu parent-nya perlu non-static positioning karena childnya akan jadi absolute.

/* Parent */
.parent {
  position: relative;
  /* Bisa juga fixed / absolute / sticky */
}

/* Child */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% -50%);
}

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.

(Cobain sendiri biar lebih jelas)

**Baca Juga : ** Belajar CSS Flexbox dalam 5 Menit

Padding Method

Cuma pake satu element dan juga paling simpel, tapi kurang bagus.

Gimana caranya? Kasih padding.

.elementnya {
  padding: 80px;
  /* Kasih aja yang banyak */
  /* Tapi jangan kebanyakan */
}

---

Well, menurut kalian mana yang paling bagus?

Sumber : Centering in CSS: A Complete Guide Centering in CSS