Bagaimanakah Saya Boleh Memusatkan DIV Secara Mendatar dan Menegak Sambil Memelihara Kandungannya?

Memusatkan DIV Secara Mendatar dan Menegak dengan Pemeliharaan Kandungan

Dalam situasi di mana penjajaran DIV secara mendatar dan menegak adalah penting dan kandungan mesti kekal utuh, adalah perlu untuk mencari pendekatan yang mengelakkan kelemahan kedudukan mutlak dengan negatif margins.

Walaupun flexbox menawarkan penyelesaian moden yang menjajarkan kandungan dengan baik, ia mungkin tidak sesuai untuk penyemak imbas lama. Untuk keserasian yang lebih luas, pertimbangkan kaedah berikut:

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Pendekatan ini menggunakan kedudukan mutlak dan transformasi CSS (-webkit-transform dan transform) untuk memusatkan DIV. Fungsi transformasi mengalihkan kedudukan DIV dengan separuh daripada lebar dan ketinggiannya dalam kedua-dua arah. Ini memastikan kandungan itu dipelihara tanpa mengira saiz tetingkap atau variasi kandungan.

Terokai teknik ini dengan lebih lanjut di Codepen atau JSBin untuk menyaksikan keberkesanannya. Untuk sokongan penyemak imbas yang lebih lama, kaedah alternatif yang dibincangkan di tempat lain dalam urutan ini mungkin diperlukan.