Memusatkan div yang mengekalkan nisbah aspek apabila ada margin badan '

Cabaran CSS ini melibatkan mewujudkan div dengan sifat -sifat tertentu: pusat menegak dan mendatar, penskalaan viewport dengan margin, mengekalkan nisbah aspek tetap, dan semua tanpa JavaScript. Beberapa penyelesaian dibentangkan:

Cabaran, seperti yang dijelaskan oleh Andrew Welch, memerlukan:

• Pusat: Kedua -dua menegak dan mendatar.
• Skala: Div harus mengubah saiz agar sesuai dengan paparan sambil mengekalkan margin.
• Nisbah Aspek: Nisbah aspek sewenang -wenang mesti dipelihara.
• Tiada JavaScript: Penyelesaiannya hanya menggunakan CSS.

Beberapa pemaju menawarkan penyelesaian, termasuk:

• Mark Huot: Pengiraan nisbah lebar/ketinggian dan aspek langsung yang digunakan untuk menentukan margin.
• Amelia Wattenberger & Eric A. Meyer: Unit Viewport yang Dipekerjakan (VH/VW) untuk ketinggian/lebar dan max-tinggi/max-lebar, berpusat dengan translate (Amelia) atau Flexbox (Eric).
• Brian Hart & Benoît Rouleau: Unit vmin yang digunakan untuk saiz nisbah aspek dan berpusat dengan Flexbox. Benoît menggunakan calc() untuk pelarasan margin.
• Jonathan Melville: Membentangkan penyelesaian terutamanya menggunakan kelas CSS Tailwind.

Andrew Welch akhirnya menyukai penyelesaian menggunakan unit vmin , walaupun dia mengakui bahawa penggunaannya calc() untuk pengurangan margin mungkin tidak perlu. Pelbagai pendekatan menyerlahkan fleksibiliti CSS dalam menangani masalah susun atur ini.

Atas ialah kandungan terperinci Memusatkan div yang mengekalkan nisbah aspek apabila ada margin badan '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!