我试图将此元素置于屏幕中心，当我悬停时也是如此。
在下面的示例中，div 没有居中，即使当我将其悬停时，知道我也进行了 50% 变换，并且顶部/左侧也进行了变换，这就是我用来使元素居中的常用方法。
2
971* {
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);
}
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
请记住，变换的顺序决定了元素的显示方式。您首先移动元素
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); }