Cara ini sebenarnya sudah pernah dibahas oleh Designhack yaitu tentang bagaimana membuat apa saja berada ditengah, karena disana semuanya telah dibahas mulai dari elemen, teks dan background. Tapi Pada kesempatan kali ini saya akan membahas tentang centering element atau membuat elemen berada ditengah dengan posisi fixed/absolute.
ILUSTRASI
Kodenya aku warnai biar gampang dibedakan...
Problem/Masalah:
1. Jika anda membuat elemen dengan posisi absolute/fixed lalu memberi kode
left: 50% dan top: 50% dengan tujuan agar elemen berada ditengah maka hasilnya masih agak kacau (jika belum diberi margin).2. Border jika pada elemen yang anda buat menggunakan border maka nilai ketebalan border itu sangat berpengaruh agar elemen bisa tepat berada ditengah.
Solusi:
Saat anda memberi property
left: 50% dan top: 50% pada elemen fixed/absolute, maka anda harus atur pula nilai margin dari elemen tersebut. untuk mengaturnya anda harus melihat dulu berapa lebar dan tinggi elemennya lalu bagi dua, perhatikan ilustrasi diatas lebar 200px dan tinggi 150px jika 200px dibagi dua maka hasilnya 100px dan 150px dibagi dua hasilnya 75px sekarang beri nilai marginnya dengan nilai hasil bagi lebar dan tinggi elemen, tapi dalam bentuk minus agar elemen berada tepat ditengah. sesuai dengan kode left: 50% dan top: 50% maka pada marginnya yang perlu anda atur adalah nilai left dan top nya seperti ilustrasi diatas.Pasti anda bertanya-tanya kenapa hasil bagi
200px dan 150px diatas justru 105px dan 80px itu karena ada border dengan ketebalan 5px jadi jika anda mmenggunakan border pada elemen absolute/fixed maka anda harus tambah nilainya dengan nilai bordernya seperti contoh diatas 200px bagi dua 100px ditambah ketebalan border 5px jadi 105px, begitu juga 150px seharusnya kan 75px tapi karena ada border dengan ketebalan 5px jadi 75 + 5 = 80 Nah seperti itulah kira-kira gambaran untuk membuat elemen absolute/fixed berada ditengah. bisa anda buktikan dengan membuat dua elemen yaitu elemen pertama dengan posisi relatif menggunakan margin: 0 auto lalu kedua buat elemen absolute dan lihat apakah ada yang beda atau tidak.CONTOH
Lihatlah sumber dari halaman tersebut, gak ada beda kan antara posisi absolute dan relatif
