Cara Membuat Posisi Elemen Di Tengah - Igniel

Bagaimanakah cara membuat teks atau elemen ada di tengah halaman web? Pertanyaan ini lumayan sering muncul di komentar blog Igniel. Meski terdengar sederhana, nyatanya membuat posisi elemen di tengah dengan CSS memang gampang-gampang susah. Mari kita langsung praktekan tutorial berikut ini.

Pertama-tama, saya bersyukur dengan adanya CSS Flexbox alias display:flex yang telah mempermudah teknik menengahkan elemen di web dan blog. Sebelum keduanya ada, biasanya saya (dan mungkin kebanyakan orang lain juga) menggunakan position:absolute atau position:fixed.

Saya tidak bilang bahwa CSS position tidak baik atau jadul ya, hanya saja saya merasa bahwa display lebih gampang untuk dipakai karena tidak perlu lagi mengatur margin atau nilai top, bottom, left, dan right.

Agar Posisi Elemen Ada di Tengah Blog

Saya akan membuat sebuah class CSS baru bernama .center agar saat pemanggilannya tinggal ditulis saja di HTML.

PENTING! Pastikan dulu bahwa tidak ada class CSS lain bernama .center di dalam blog agar kodenya tidak bentrok. Jika sudah ada, ganti saja nama class .center sesuai keinginan, yang penting unik.

1. Posisi Tengah Horizontal

Elemen Tengah Horizontal

Bisa juga disebut posisi elemen di tengah yang rata kiri kanan. Ini posisi center yang lumrah dimaksud orang-orang.

<!-- Center Element Horizontal by igniel.com -->
.center {
  display: flex;
  justify-content: center;
}

Baca Juga: Cara Pasang Iklan Berulang di Tengah Artikel

2. Posisi Tengah Vertikal

Elemen Tengah Vertikal

Kamu juga bisa menyebutnya posisi tengah rata atas bawah. Sebenarnya jarang ada yang pakai posisi ini, tapi tetap akan saya tulis. Posisinya akan mengikuti tinggi (height) elemen utama.

Baca Juga: Cara Pasang Multi Related Post di Tengah Artikel

Maksudnya jika blog masih kosong, otomatis body-nya hanya setinggi ukuran teks. Jadi kalau mau pakai posisi ini, pastikan body memiliki tinggi yang cukup agar posisinya terlihat di tengah.

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

3. Posisi Tengah Horizontal dan Vertikal

Elemen Tengah Horizontal dan Vertikal

Posisi elemen di tengah rata kiri kanan atas bawah. Ini juga lumayan sering dicari nih.

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Cara Pakai CSS Posisi Elemen di Tengah

1. Pilih salah satu kode CSS yang sudah ditulis di atas.
2. Simpan kodenya di pengaturan blog.
3. Saat menulis artikel, buat elemen div dan berikan nama class .center seperti contoh berikut:

<div class="center">
  <!-- Tuliskan teks atau elemen apapun yang ingin ditempatkan di tengah -->
</div>

Kamu juga bisa menambahkan properti flex untuk lebih mengukuhkan lebarnya (width) mengikuti ukuran lebar induk sehingga elemen benar-benar ada di tengah. Sebenarnya untuk kasus sederhana seperti menengahkan elemen ini, tidak perlu-perlu amat pakai flex. Tapi biar lebih afdol, pakai saja kalau mau. Gak apa-apa kok.

flex: 1 0 100%

Kode di atas adalah bentuk dari CSS shorthand yang jika dijabarkan memiliki nilai sebagai berikut:

• flex-grow: 1;
  Memastikan elemen tumbuh sampai ujung (melebar).
• flex-shrink: 0;
  Memastikan lebar elemen tidak menciut.
• flex-basis: 100%
  Lebar dari elemen 100% mengikuti lebar induk.

Sehingga kode akhirnya kurang lebih seperti ini:

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1 0 100%;
}

Sekian tutorial singkat mengenai cara membuat elemen di tengah posisi blog / web menggunakan CSS. Semoga bisa sedikit menambah informasi.