Bagaimana untuk Memusatkan DIV Secara Mendatar dan Menegak Tanpa Menggunting Kandungan?

Memusatkan DIV Secara Mendatar dan Menegak Tanpa Memotong Kandungan

Apabila melihat untuk memusatkan DIV secara menegak dan mendatar, adalah penting untuk memastikan kandungan kekal utuh walaupun tetingkap menjadi lebih kecil daripada kandungan itu sendiri.

Satu pendekatan biasa melibatkan kedudukan mutlak dan negatif margin. Walau bagaimanapun, kaedah ini boleh menyebabkan kandungan terputus apabila saiz tetingkap berkurangan.

Untuk penyemak imbas moden, penyelesaian yang lebih baik tersedia menggunakan Flexbox:

HTML

<div>

CSS

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

Pendekatan ini menggunakan transformasi untuk menterjemah kandungan tanpa menjejaskan saiznya. Akibatnya, kandungan kekal berpusat tanpa mengira dimensi tetingkap.

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