為什麼div不居中

Question

我試圖將此元素置於螢幕中心，當我懸停時也是如此。在下面的範例中，div沒有居中，即使當我將其懸停時，知道我也進行了50%變換，並且頂部/左側也進行了變換，這就是我用來使元素居中的常用方法。 *{box-sizing:border-box;}body{position:relative}.zoom{padding:50px;background-color:green;transition:trans

P粉211600174 · Answer

該錯誤位於 :hover 選擇器中，因為轉換中沒有 translate() ，您基本上將其重置為 0，這不是您想要的。因為它會忘記之前的內容並覆蓋它。

這裡有一個簡單的解決方案：

❌

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

✅

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

這裡有一個簡單的解釋：

現代解決方案（更少的程式碼）：

使用 CSS 網格 https://developer.mozilla.org/ en-US/docs/Web/CSS/grid

使用place-items 它將自動居中，無需任何轉換或位置... https://developer.mozilla.org/en-US/docs/Web/CSS/place -items

#此外，您不必在開始時對0.2 進行縮放，只需從scale(1) 開始，然後透過懸停更大的比例來使其更大，例如4 。（因此，在沒有任何懸停的情況下，它不會在從 200px 到 0.2scale 過渡開始時產生該錯誤）

但是，如果您想讓 CSS 在 IE 和舊版瀏覽器中也能運作，那麼最好使用位置、平移、頂部、左側...

但是您的使用者使用的是現代瀏覽器，因此為了提高可讀性並更簡單地使用 Flexbox 或網格可能是一個好主意。

如需了解更多信息，請使用https://caniuse.com （例如，任何瀏覽器95% 都支援網格從2020 年開始，Chrome 從2017 年開始）

這裡是 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);
}

P粉797855790 · Answer

請記住，變換的順序決定了元素的顯示方式。您首先移動元素 top: 50%; left: 50%;，並將其置於右下象限。然後你把它變小transform:scale(0.2) 然後然後你把它向左移動現在較小尺寸translate(-50%, -50%) 的50%。

透過將翻譯放在第一位，元素會在變小之前居中。請記住，當您增加大小時，也要包含translate(-50%, -50%)，因為後續的翻譯將覆蓋當前的翻譯，而不是添加到其中。

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