Letak Kad di Tengah

10 minitPemulaCSS

Meletakkan sesuatu di tengah pada kedua-dua paksi ialah masalah kecil paling terkenal dalam CSS. Kad menu anda tersangkut di penjuru kiri atas halaman. Alihkan ia ke tengah-tengah .stage.

Sebelum: kad melekat di penjuru kiri atas.
Selepas: titik tengah kad sama dengan titik tengah stage (dalam lingkungan 2px).

Kekangan

Ubah style.css sahaja. Kekalkan nama class .stage dan .card.
Kekalkan lebar kad lebih kurang 260px — jangan regangkan ia memenuhi stage.
Apa-apa teknik sebenar dibenarkan: flexbox, grid atau positioning. Penyemak mengukur di mana kad sebenarnya berada, bukan property yang anda guna.

Sunting style.css supaya .card berada betul-betul di tengah .stage — mendatar dan menegak — tanpa meregangkannya.

Semakan

Kad berada di tengah secara mendatar
Kad berada di tengah secara menegak
Saiz kad dikekalkan

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.