Bagaimana untuk memusatkan kotak div di tengah skrin dalam html

Cara untuk memusatkan kotak DIV di tengah skrin: Gunakan sifat CSS text-align: center; auto;. Gunakan paparan flexbox: flex; justify-content: center; Gunakan kedudukan kedudukan mutlak: kiri mutlak: 50%;

Cara untuk memusatkan kotak DIV di tengah-tengah skrin

Kaedah 1: Gunakan sifat CSS

• text-align: center;
• margin: auto; Menetapkan jidar automatik pada elemen bekas, yang akan memusatkan elemen dalam bekas.

Kod HTML:

<div style="text-align: center; margin: auto;">
  您的内容在此
</div>

Kaedah 2: Gunakan flexbox

• paparan: flex; untuk menukar elemen bekas kepada flexbox.
• justify-content: tengah; Pusatkan elemen pada paksi utama (mendatar).
• align-item: tengah; Pusatkan elemen pada paksi silang (arah menegak).

Kod HTML:

<div style="display: flex; justify-content: center; align-items: center;">
  您的内容在此
</div>

Kaedah 3: Gunakan kedudukan mutlak

• kedudukan: mutlak; untuk mengalih keluar elemen daripada aliran dokumen biasa.
• kiri: 50%; Gerakkan elemen dari kiri sebanyak separuh lebarnya.
• transformasi: terjemah(-50%, -50%); Gerakkan elemen ke kiri dan ke atas dari titik tengah dengan separuh lebar dan tingginya.

Kod HTML:

<div style="position: absolute; left: 50%; transform: translate(-50%, -50%);">
  您的内容在此
</div>

Nota Tambahan:

• Dalam sesetengah kes, anda mungkin perlu melaraskan margin atau nilai gaya lain untuk memastikan pemusatan yang betul.
• Pastikan elemen bekas cukup besar untuk memuatkan kandungan anda.
• Kaedah ini berfungsi dalam semua pelayar moden.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan kotak div di tengah skrin dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!