Absolute centering: Cara membuat div rata tengah, horizontal dan vertical dengan CSS

Mungkin sudah banyak yang bisa menebak caranya membuat div rata tengah, yaitu dengan ‘margin: 0 auto’. Namun ternyata itu hanya berhasil untuk rata tengah horizontal, bagaimana dengan rata tengah secara vertical?

Lalu bagaimana agar div rata tengah baik vertical dan horizontal? Ternyata dapat dilakukan dengan hanya menambahkan element : height kedalam CSS.

misalnya CSS awal adalah:

.tengah {
     margin: auto;
     position: absolute;
     top: 0; left: 0; bottom: 0; right: 0;
}

Cukup tambahkan:

.tengah {
     margin: auto;
     position: absolute;
     top: 0; left: 0; bottom: 0; right: 0;
     height: 300px;
     border: 1px solid #999; /*jika ingin melihat posisi div anda lebih jelas */
}

Elemen div apakah sudah rata tengah horizontal dan vertical sekarang? yep, dan ini sudah saya tes pada beberapa browser umum seperti chrome, mozilla, safari dan opera. bekerja dengan baik 🙂

Sedikit penjelasan yang mungkin menjawab pertanyaan, mengapa bisa rata tengah secara vertical dan horizontal:

1. jika nilai margin-top dan margin-bottom adalah auto, nilai yang pakai adalah ‘0’
2. position: absolute; posisi div menjadi tetap, baik jika digunakan bersamaan dengan top, bottom, left, right.
3. top, bottom, left dan right : 0, memerintahkan browser untuk memberikan bounding box / batasan baru setelah di absolute-kan
4. width dan height, browser memberi nilai default 100% jika tidak ada nilai awalnya.

Semoga dapat memberikan pencerahan. Jika ada yang mau menambahkan metode diatas silahkan memberikan masukannya di kolom komentar dibawah ini 🙂