Cara Vertical Centering Menggunakan CSS

Vertical centering berarti mengatur agar konten halaman web berada di tengah dari sudut pandang vertikal. Ada banyak cara untuk melakukannya, baik menggunakan HTML, CSS, ataupun yang lain. Tapi yang berikut ini adalah favorit saya.

#vcenter {
    position: absolute;
    top: 50%;
    margin-top: -296px;
}

vcenter adalah nama <div> yang isinya ingin di-vertical center-kan.

margin-top bernilai setengah dari height* (tinggi) konten-nya.

Semoga berguna!

*Jika anda tidak tahu berapa height-nya, gunakan fasilitas Inspect Element dari Google Chrome/Mozilla Firefox.

Iklan

Tulis Komentar

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: