Mengatur Posisi Elemen Menjadi Ke Tengah Secara Vertical

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan satu trik tentang html css.

Pada trik kali ini saya akan menggunakan position absolute dan relative jika kalian belum paham bisa lihat postingan berikut yang berjudul Pengertian Position Relative dan Position Absolute dan Mengatur Posisi Elemen Menjadi Ke Tengah Secara Horizontal

Jika kalian sudah lihat tutorial diatas, maka saya akan menjelaskan tentang cara mengatur posisi elemen menjadi ke tengah secara vertical ketika menggunakan position seperti berikut.

Pertama kita buat dahulu struktur html sederhana seperti dibawah ini

 

 

Selanjutnya kita buat CSS seperti berikut

Pada css diatas saya memberikan property transform: translateY(-50%) dimana property tersebut berguna untuk menggeser objek 50% x Lebar Objek ke atas dari posisi seharusnya dan saya juga memberikan top:50% untuk menggeser titik awal objek ke tengah pembungkusnya.

 

Jika sudah coba kalian test di browser, maka akan terlihat seperti ini.

 

Baiklah teman-teman, demikian artikel kali ini yang membahas tentang cara mengatur elemen menjadi ke tengah secara vertical. Semoga bermanfaat

3 Juni 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat