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

Keajaiban Transformasi: terjemah(-50%, -50%)

Apabila berurusan dengan imej besar atau elemen skrin penuh, Pembangun CSS sering menggunakan coretan kod yang ingin tahu:

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

Apakah tujuan di sebalik kod ini dan bagaimana ia berfungsi?

Sifat transformasi mengalihkan kedudukan elemen berbanding dengan titik rujukan asalnya. Dalam kes khusus ini, terjemah(-50%, -50%) menterjemah elemen dalam kedua-dua paksi X dan Y sebanyak -50% daripada saiznya sendiri.

Untuk memahami mengapa ini perlu, mari kita pecahkannya turun ke dalam komponennya:

• translateX(-50%): Mengalihkan elemen ke kiri sebanyak 50% daripada lebarnya, menggerakkan bahagian tengahnya tuding ke sudut kiri atas sebelumnya.
• terjemahY(-50%): Mengalihkan elemen ke atas sebanyak 50% daripada ketinggiannya, sekali lagi membawa titik tengah kembali ke sudut kiri atas yang asal.

Dengan menetapkan bahagian atas dan kiri kepada 50%, kami mula-mula mengalihkan sudut kiri atas elemen ke tengah bekas induknya. Walau bagaimanapun, ini meninggalkan titik tengah elemen diimbangi daripada pusat induk.

Transformasi: terjemah(-50%, -50%) membetulkannya dengan mengalihkan elemen kembali ke kiri dan ke atas sebanyak separuh daripada saiznya sendiri. Ini memastikan bahawa titik tengah elemen kini diselaraskan dengan titik tengah induknya, mencapai pemusatan mendatar dan menegak yang sempurna.

Untuk menggambarkan kesan, tuding pada 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%);
}

Perhatikan cara "hantu" merah elemen tengah bergerak dengan lancar ke tempatnya apabila anda menuding di atas bekas induk. Ini menunjukkan cara transform: translate(-50%, -50%) digunakan untuk mencapai pemusatan sempurna dalam CSS.

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