Rumah >hujung hadapan web >tutorial css >Bagaimana Memusatkan DIV Secara Menegak dan Mendatar Tanpa Pemangkasan Kandungan?

Bagaimana Memusatkan DIV Secara Menegak dan Mendatar Tanpa Pemangkasan Kandungan?

Barbara Streisand
Barbara Streisandasal
2024-12-16 01:19:10883semak imbas

How to Vertically and Horizontally Center a DIV Without Content Trimming?

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!

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