Bagaimanakah `transform: translate(-50%, -50%)` Memusatkan Elemen?

Memahami Peranan "Transform: translate(-50%, -50%)"

Apabila bekerja dengan imej wira atau elemen yang merentangi keseluruhan skrin, adalah perkara biasa untuk menemui kod CSS seperti:

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Tetapi apakah sebenarnya kod ini capai?

Kunci untuk memahami kod ini ialah mengenali bahawa ia menjajarkan pusat elemen dengan pusat induknya. Ini dicapai dengan:

• translateX(-50%): Menggerakkan elemen ke kiri sebanyak 50% daripada lebarnya, dengan berkesan memusatkannya di sepanjang paksi-x.
• terjemahY(-50%): Menggerakkan elemen ke atas sebanyak 50% daripada ketinggiannya, memusatkannya di sepanjang paksi-y.

Dengan menggerakkan elemen ke belakang ke kiri dan ke atas dengan separuh daripada lebar dan tingginya, pusat elemen itu diselaraskan dengan pusat induknya, mencapai kedua-dua mendatar dan menegak pemusatan.

Untuk menggambarkan ini, pertimbangkan kod berikut coretan:

body {
  margin: 0;
  padding: p;
}

.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 induk, elemen hantu (.child::before) menjadi terpusat secara visual dengan menggunakan sifat transform: translate(-50%, -50%).

Atas ialah kandungan terperinci Bagaimanakah `transform: translate(-50%, -50%)` Memusatkan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!