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 )

Foto Google+

You are commenting using your Google+ 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 )

w

Connecting to %s

%d blogger menyukai ini: