Bagaimana Memusatkan DIV Secara Menegak dan Mendatar Tanpa Pemangkasan Kandungan?-tutorial css-php.cn

Bagaimana Memusatkan DIV Secara Menegak dan Mendatar Tanpa Pemangkasan Kandungan?

Barbara Streisand

Lepaskan： 2024-12-16 01:19:10

asal

882 orang telah melayarinya

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!