Bagaimanakah Saya Boleh Memusatkan DIV Secara Mendatar dan Menegak Tanpa Memotong Kandungan?

Memusatkan DIV Secara Mendatar dan Menegak

Memusatkan DIV secara menegak dan mendatar boleh dicapai menggunakan pelbagai kaedah, tetapi ia menjadi mencabar apabila limpahan kandungan tidak boleh diterima. Salah satu pendekatan biasa telah menggunakan kedudukan mutlak dengan margin negatif, namun, ini boleh menyebabkan kandungan terputus apabila saiz tetingkap lebih kecil daripada kandungan.

Penyelesaian untuk Penyemak Imbas Moden

Untuk pelayar web dengan sokongan moden, flexbox menyediakan yang lebih dipercayai dan cekap penyelesaian.

HTML:

<div class="content">This works with any content</div>

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Pendekatan ini menggunakan kedudukan mutlak dan transformasi CSS untuk mengalihkan kandungan ke tengah port pandangan, tanpa menjejaskan kandungan itu sendiri. Ini memastikan keseluruhan kandungan kekal kelihatan, tanpa mengira saiz tetingkap.

Pertimbangan untuk Penyemak Imbas Lama

Jika sokongan untuk penyemak imbas lama diperlukan, penyelesaian alternatif mungkin diperlukan, seperti menggunakan jadual, kedudukan terapung dengan lajur sama ketinggian, atau perpustakaan JS untuk sokongan merentas penyemak imbas. Walau bagaimanapun, kaedah ini mungkin mempunyai hadnya sendiri dan mungkin tidak selalu sesuai untuk semua senario.

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