为什么div不居中

问题描述 投票：0回答：3

我试图将此元素置于屏幕中央，当我悬停时也是如此。

在下面的示例中，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>

css css-transforms
3个回答
1
投票

请记住，变换的顺序决定了元素的显示方式。首先移动元素 

top: 50%; left: 50%;
，将其置于右下象限。然后将其变小
transform: scale(0.2)
，然后然后将其向左移动现在较小尺寸的 50% 
translate(-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); }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
<body>
 
<div class="zoom"></div>

</body>
</html>





    



    

    
    
    

    

        

            

                

                    
1
投票

                    
                

            

        

        
该错误位于 
: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（例如，从 2020 年开始，任何浏览器都支持 95% 的网格，从 2017 年开始，Chrome 浏览器也支持网格）





这里是 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);
}
<body>
  <div class="zoom"></div>
</body>





    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
将 
translate(-50%, -50%)
 
放在 scale(0.2)
之前。另外，您需要在 
translate(-50%, -50%)
 规则中包含 
hover
，否则它会缩放，但会将翻译部分重置为其默认值。






* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  position: relative
}

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

.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);
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div class="zoom"></div>

</body>

</html>





    



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.