为何使用CSS zoom/scale缩放div后宽高仍为原值？CSS spinner无法居中

问题1：为什么zoom/scale缩放后元素width/height仍保持原始数值？ #

这是因为zoom和transform: scale()本质上都是视觉层面的缩放，它们不会修改元素的**布局盒模型（Box Model）**尺寸：

• transform: scale()属于CSS标准变换，它是在元素绘制完成后对其进行的视觉变形，元素在文档流中占据的空间还是原始的width/height，所以你在开发者工具里看到的width/height属性值不会改变。
• zoom是IE引入的非标准属性（目前部分现代浏览器兼容），它同样只缩放元素的视觉呈现，不会改变元素在布局中的占位大小，因此布局相关的属性值也不会更新。

简单来说，这俩都是“看起来变小/变大了，但实际占的地方还是原来那么大”，所以width/height数值会保持原样。

问题2：CSS Spinner无法居中，缩放后width/height仍显示200px的解决方法 #

先拆解你当前代码的几个核心问题：

1. .center类用了display: table-cell，但它的父元素没有设置display: table，导致垂直居中逻辑完全失效；
2. 你给spinner容器用了position: absolute; left:50%; top:50%，但没有配合transform: translate(-50%, -50%)修正偏移——加上缩放后，这个50%的偏移基准还是原始尺寸，会导致元素偏离中心；
3. 同时混用zoom:0.5和-moz-transform:scale(0.5)容易造成浏览器渲染冲突，建议统一使用标准的transform: scale()，并指定缩放原点。

修改后的完整代码 #

首先调整.center的CSS，用现代Flexbox实现可靠居中：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 让容器占满整个视口高度，确保垂直居中生效 */
}

然后调整spinner容器的样式，解决居中+缩放问题：

<div class="center">
  <div class="uil-default-css" style="width: 200px;height: 200px;transform: scale(0.5);transform-origin: center;">
    <!-- 以下12个小div保持不变 -->
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
  </div>
</div>

额外说明 #

• 关于width/height显示200px的问题：这依然是scale视觉缩放的特性，布局尺寸不会改变。如果你需要让布局尺寸也变成100px，直接把spinner容器的width/height改成100px即可，不需要依赖scale——这样开发者工具里看到的就是实际布局尺寸了。

内容的提问来源于stack exchange，提问作者abubi abubi