cari

Rumah  >  Soal Jawab  >  teks badan

Mengapa div tidak berpusat?

Saya cuba memusatkan elemen ini pada skrin, juga apabila saya menuding.

Dalam contoh di bawah, div tidak berpusat, walaupun saya mengarahkannya, mengetahui bahawa saya mempunyai transformasi 50% dan bahagian atas/kiri juga berubah, inilah yang biasanya saya gunakan untuk memusatkan elemen . 

* {
  box-sizing: border-box;
}
body {
position: relative }

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

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
<body>
 
<div class="zoom"></div>

</body>
</html>

P粉805922437P粉805922437299 hari yang lalu385

membalas semua(2)saya akan balas

  • P粉211600174

    P粉2116001742024-02-05 07:00:08

    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);
}

    balas
    0
  • P粉797855790

    P粉7978557902024-02-05 00:44:14

    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); 
}

    balas
    0
  • Batalbalas