Ralat berada pada :hover 选择器中，因为转换中没有 translate() dan anda pada dasarnya menetapkannya semula kepada 0, yang bukan yang anda mahukan. Kerana ia akan melupakan kandungan sebelumnya dan menimpanya.

Ini penyelesaian mudah:

❌

.zoom:hover {
  transform: scale(1.5); 
}

✅

.zoom:hover {
  transform: 
     scale(1.5)
     translate(-50%, -50%); /* add this */
}

Berikut penjelasan ringkas:

Penyelesaian moden (kurang kod):

Gunakan Grid CSS https://developer.mozilla.org/ en-US/docs/Web/CSS/grid

Gunakan place-items dan ia akan berpusat secara automatik tanpa sebarang perubahan atau kedudukan... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

Selain itu, anda tidak perlu risau tentang 0.2 进行缩放，只需从 scale(1) 开始，然后通过悬停更大的比例来使其更大，例如 4 pada mulanya. (Jadi tanpa sebarang tuding, ia tidak akan menghasilkan ralat itu pada permulaan peralihan daripada 200px kepada 0.2 skala)

Tetapi jika anda mahu CSS anda berfungsi dalam IE dan penyemak imbas yang lebih lama, maka lebih baik menggunakan kedudukan, pan, atas, kiri...

Tetapi pengguna anda menggunakan penyemak imbas moden, jadi untuk kebolehbacaan dan kesederhanaan yang lebih baik mungkin idea yang baik untuk menggunakan Flexbox atau Grid.

Untuk maklumat lanjut, gunakan https://caniuse.com (cth. 95% sokongan untuk Grid dalam mana-mana penyemak imbas mulai 2020, Chrome mulai 2017)

Berikut ialah penyelesaian grid CSS

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
}

.zoom {
  background-color: green;
  width: 50px;
  height: 50px;
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(4);
}

Ingat bahawa susunan perubahan menentukan cara elemen dipaparkan. Anda bermula dengan menggerakkan 50% elemen top: 50%; left: 50%;，将其置于右下象限。然后你把它变小 transform:scale(0.2) 然后然后你把它向左移动现在较小尺寸 translate(-50%, -50%).

Dengan mendahulukan terjemahan, elemen akan dipusatkan sebelum menjadi lebih kecil. Ingat untuk turut sertakan translate(-50%, -50%) apabila anda menambah saiz, kerana terjemahan seterusnya akan menimpa terjemahan semasa dan bukannya menambahnya.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
position: relative }

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  
  transform: translate(-50%, -50%) scale(.2);
  position: absolute;
      top: 50%;
    left: 50%;
}

.zoom:hover {
  -ms-transform: translate(-50%, -50%) scale(1.5); /* IE 9 */
  -webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari 3-8 */
  transform: translate(-50%, -50%) scale(1.5); 
}