Ads by Yasya El Hakim
Mengatur Absolute Menjadi Rata Tengah pada CSS

Jika kalian ingin membuat elemen menjadi rata tengah secara horizontal pada CSS, kalian bisa menggunakan text-align: center; (hanya bekerja pada elemen inline) atau margin: 0 auto; (jika menggunakan elemen block). Tetapi terdapat kasus dimana kita tidak dapat membuat perataan tengah secara horizontal dan vertical. Disinilah kita akan membahas semuanya.

Pada artikel kali ini, kita akan menggunakan beberapa teknik untuk membuat suatu elemen menjadi rata tengah.



Menggunakan Property Position dan Transform

Berikut adalah contoh kodenya:

.parent {
  position: relative;
}
.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}


Property diatas diatur untuk elemen child. Mengatur posisi menjadi rata tengah dengan Absolute pada dasarnya, elemen parent harus memiliki property position: relative;. Jika tidak memiliki property tersebut, maka posisinya akan relative ke seluruh dokumen. Pada kode diatas, saya menambahkan top: 50%; left: 50%; karena posisinya itu dihitung dari pojok kiri atas.

Kalian harus menarik item dengan setengah lebar dan tinggi. Kalian dapat mengatasinya dengan menggunakan transform: translate(-50%, -50%);.

Menggunakan Unit Viewport

Berikut adalah contoh kodenya:

.child {
  margin: 50vh auto 0;
  transform: translateY(-50%);
}


Pada kode diatas, kita menggunakan margin-left/margin-right: auto; untuk mengatur perataan tengah secara horizontal dan menggunakan nilai vh untuk mengatur perataan tengah secara vertical. Tentu saja kalian harus menarik item seperti contoh sebelumnya (tetapi hanya mengatur tinggi translate).

Catatan: Metode ini hanya bekerja jika posisinya ada di viewport utama.

Menggunakan Flexbox

Berikut adalah contoh kodenya:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}


Mengatur parent (kontainer) menjadi display: flex; dapat memberitahukan browser bahwa elemen child dapat menggunakan Flexbox untuk tata letaknya. justify-content dapat menentukan bagaimana ruang dari row (kanan-kiri) atau column (atas-bawah). align-content sama seperti justify-content, tetapi dapat mengontrol dimana item berada pada sumbu x.

Selain menggunakan justify-content dan align-items, kita juga dapat menggunakan margin: auto; pada elemen child:

.parent {
  display: flex;
  min-height: 100vh;
}
.child {
  margin: auto;
}


Menggunakan CSS Grid

Berikut adalah contoh kodenya:

.parent {
  display: grid;
  grid-template-rows: 100vh;
  grid-template-columns: 100vw;
}
.child {
  justify-self: center;
  align-self: center;
}


Pada kode diatas, kita telah mengatur elemen parent dengan display: grid; dan menentukan lebar row/column. Pada elemen child kita telah mengatur justify-self dan align-self menjadi center. Property justify-self dan align-self dapat kita gunakan untuk mengatur perataan yang didalam elemen parent (kontainer).

Mungkin itu saja yang bisa saya tunjukkan, semoga artikel ini bisa bermanfaat bagi kalian. Terimakasih telah membaca dan berkunjung di EL Creative Academy!

0Komentar

Sebelumnya Selanjutnya