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

Memahami CSS Transform Property: translate(-50%, -50%)

Apabila bekerja dengan imej wira atau elemen skrin penuh , adalah perkara biasa untuk menemui kod CSS yang merangkumi perkara berikut:

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

Coretan CSS ini menimbulkan soalan: Apakah yang dilakukan oleh kod ini sebenarnya?

Peranan terjemah(-50%, -50%)

Tujuan transformasi: terjemah(- 50%, -50%) harta adalah untuk menterjemah, atau memindahkan, elemen ke lokasi tertentu. Dalam kes ini, unsur diterjemahkan dalam kedua-dua arah mendatar dan menegak.

Terjemahan Mendatar: translateX(-50%)

Bahagian pertama terjemahan, translateX(-50%), menggerakkan elemen 50% daripada lebarnya ke kiri. Ini sama dengan mengalihkan tepi kiri elemen ke tengah bekas induknya.

Terjemahan Menegak: translateY(-50%)

Bahagian kedua terjemahan , translateY(-50%), menggerakkan elemen 50% daripada ketinggiannya ke atas. Ini bersamaan dengan mengalihkan tepi atas elemen ke tengah bekas induknya.

Memusatkan Unsur

Digabungkan, terjemah(-50%, -50% ) secara berkesan menggerakkan pusat unsur ke tengah bekas induknya. Ini selalunya digunakan untuk mencipta elemen yang berpusat secara visual secara mendatar dan menegak.

Bukti Konsep

Untuk menggambarkan konsep, pertimbangkan coretan kod berikut:

.parent {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.child {
  width: 50px;
  height: 50px;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Apabila anda meletakkan elemen kanak-kanak di dalam induk, anda boleh melihat bahawa ia dipusatkan secara mendatar dan secara menegak. Ini kerana sifat transformasi: terjemah(-50%, -50%) telah mengalihkan pusat elemen anak ke tengah bekas induk.

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