Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Memusatkan DIV Secara Mendatar dan Menegak Tanpa Memotong Kandungan?

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

Linda Hamilton
Lepaskan: 2024-12-29 06:41:18
asal
973 orang telah melayarinya

How Can I Horizontally and Vertically Center a DIV Without Cutting Off Content?

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>
Salin selepas log masuk

CSS:

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

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan