Bagaimana untuk Memusatkan Div Secara Mendatar dan Menegak Dengan Sempurna Semasa Memelihara Kandungan?

Pemusatan Div Mendatar dan Menegak dengan Pemeliharaan Kandungan

Dalam bidang pembangunan web, selalunya perlu untuk memusatkan div secara mendatar dan secara menegak. Walaupun kaedah tradisional seperti kedudukan mutlak dan margin negatif boleh mencapai perkara ini, kaedah ini sering menjepit kandungan apabila div tidak kelihatan sepenuhnya. Artikel ini membentangkan penyelesaian yang memastikan kandungan sentiasa dipaparkan, tanpa mengira saiz tetingkap.

Penyelesaian Pelayar Moden: Flexbox

Untuk penyemak imbas moden, flexbox menawarkan penyelesaian yang elegan kepada masalah ini. Dengan flexbox, kandungan boleh dipusatkan dengan menetapkan bekas induk untuk dipaparkan: flex dan div anak kepada margin: auto.

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

.parent {
  display: flex;
}

.child {
  margin: auto;
}

Sokongan Penyemak Imbas Lama

Untuk pelayar yang tidak menyokong flexbox, transformasi CSS boleh digunakan. Dengan menetapkan div kepada kedudukan: mutlak, kiri: 50%, dan atas: 50%, dan kemudian menggunakan transformasi terjemah(-50%, -50%), div akan ditengahkan.

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

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

Dengan menggunakan sama ada transformasi flexbox atau CSS, seseorang boleh memusatkan div secara mendatar dan menegak, memastikan kandungan sentiasa kelihatan, tanpa mengira tetingkap saiz.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Div Secara Mendatar dan Menegak Dengan Sempurna Semasa Memelihara Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!