MoreLesson 240Preview gratis
Center Vertically
Lesson ini bagian dari How To · Semua level
Ringkasan
Memusatkan elemen secara vertikal kini bisa dilakukan dengan CSS modern yang ringkas. Flexbox dengan align-items: center dan Grid dengan place-items: center adalah pilihan paling fleksibel. Untuk kasus khusus, absolute positioning dengan transform masih berguna saat elemen harus menimpa konten lain.
Poin kunci
- Parent flex dengan align-items: center memusatkan anak secara vertikal; tambahkan justify-content: center untuk horizontal.
- Grid dengan place-items: center memusatkan item dalam satu deklarasi.
- Absolute dengan top: 50% dan translateY(-50%) memusatkan elemen terhadap parent berposition: relative.
- Parent harus memiliki tinggi yang jelas agar pemusatan vertikal terlihat.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.