Bagaimana Memusatkan DIV Secara Menegak dan Mendatar Tanpa Pemangkasan Kandungan?

Pemusatan DIV Menegak dan Mendatar Tanpa Pemangkasan Kandungan

Kebimbangan anda mengenai pemusatan DIV secara menegak dan mendatar tanpa memotong kandungan ialah yang biasa. Walaupun pendekatan tradisional menggunakan kedudukan mutlak dan margin negatif mungkin berfungsi, ia boleh menyebabkan kandungan terputus jika saiz tetingkap menjadi lebih kecil daripada kandungan DIV.

Nasib baik, untuk penyemak imbas moden, ada yang lebih maju pilihan:

Flexbox

HTML:

CSS:

.kandungan {
kedudukan: mutlak;
kiri: 50%;
atas: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate( -50%, -50%);
}

Penyelesaian ini menggunakan sifat transformasi untuk menterjemah kandungan DIV sebanyak 50% dalam kedua-dua arah, memastikan pusatnya sejajar dengan pusat daripada tetingkap.

Nota: Flexbox tidak disokong secara meluas dalam penyemak imbas lama, jadi adalah penting untuk mempertimbangkan keserasian penyemak imbas semasa melaksanakan penyelesaian ini.

Atas ialah kandungan terperinci Bagaimana Memusatkan DIV Secara Menegak dan Mendatar Tanpa Pemangkasan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html webkit if for while using Property this position transform Translate

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn