Bagaimanakah `translate(-50%, -50%)` Mencapai Pemusatan Sempurna dalam CSS?

Mentransformasikan Elemen dengan "terjemah(-50%, -50%)"

Dalam pembangunan web, elemen pemusatan boleh menjadi tugas biasa , terutamanya untuk imej skrin penuh atau bahagian wira. Coretan CSS yang kerap ditemui digunakan untuk tujuan ini ialah .item { atas: 50%; kiri: 50%; mengubah: terjemah(-50%, -50%); }.

Menyahbina Kod

Matlamat kod ini adalah untuk menjajarkan pusat elemen dengan pusat bekas induknya. Memecahkannya kepada komponen individunya:

• atas: 50%; kiri: 50%;: Ini menetapkan kedudukan atas dan kiri elemen masing-masing menjadi 50% daripada ketinggian dan lebar induk. Tanpa penjelmaan, ini akan meletakkan sudut kiri atas elemen di tengah-tengah induknya.
• transform: translate(-50%, -50%);: Transformation ini menganjakkan elemen ke belakang dalam kedua-dua mendatar dan arah menegak sebanyak 50% daripada lebar dan ketinggiannya sendiri. Ini dengan berkesan mengalihkan pusat elemen ke sudut kiri atas asal.

Pemusatan Visual

Dengan menggabungkan dua set gaya ini, pusat elemen sejajar dengan tepat dengan pusat ibu bapa. Teknik ini amat berguna dalam kes di mana dimensi elemen adalah dinamik atau tidak diketahui terlebih dahulu.

Contoh Dunia Sebenar

Pertimbangkan coretan kod berikut:

body {
  margin: 0;
  padding: 0;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}

Apabila anda menuding pada elemen .parent, elemen .child::before bergerak ke belakang dan ke atas sebanyak 50% daripada lebar dan ketinggiannya, mendedahkan kedudukan asal unsur .child. Ini menunjukkan kesan transformasi: terjemah(-50%, -50%) dalam memusatkan elemen secara visual dan matematik.

Atas ialah kandungan terperinci Bagaimanakah `translate(-50%, -50%)` Mencapai Pemusatan Sempurna dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!