为什么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>
回答 3
Stack Overflow用户
发布于 2022-11-04 17:00:19
记住，转换的顺序决定了元素的显示方式。首先移动元素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);
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
Stack Overflow用户
发布于 2022-11-04 16:54:54
错误在: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 )使其变得更大。(因此，它不会在200 to到0.2scale的过渡开始时创建这个bug，没有任何悬停)
但是，如果您想让CSS也在IE和旧浏览器中工作，那么使用位置，并翻译，顶部，左边.
但是您的用户使用的是现代浏览器，因此为了可读性和更简单地使用柔性盒或网格是一个很好的主意。
要了解更多信息，请使用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>
Stack Overflow用户
发布于 2022-11-04 17:15:59
把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>
https://stackoverflow.com/questions/74320337
复制相似问题
腾讯云开发者
