搜尋

首頁  >  問答  >  主體

為什麼div不居中

我試圖將此元素置於螢幕中心，當我懸停時也是如此。

在下面的範例中，div 沒有居中，即使當我將其懸停時，知道我也進行了50% 變換，並且頂部/左側也進行了變換，這就是我用來使元素居中的常用方法。 

* {
  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粉805922437343 天前436

全部回覆(2)我來回復

  • P粉211600174

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

    該錯誤位於 :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);
}

    回覆
    0
  • P粉797855790

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

    請記住，變換的順序決定了元素的顯示方式。您首先移動元素 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); 
}

    回覆
    0
  • 取消回覆