Material Design Icons CSS旋转不居中问题求助

我之前也碰到过MDI图标旋转时跑偏的情况，大概率是图标元素的布局特性或者变换原点的计算逻辑导致的，试试下面这几个调整方案：

1. 给图标容器添加固定尺寸与居中样式 #

MDI的<i>标签默认是行内元素，即使设置了display: block，如果没有明确的宽高和对齐规则，图标可能会在容器里偏移。给.spin类加上这些样式：

.spin {
  /* 根据你的布局需求选inline-block或block */
  display: inline-block;
  /* 设置和图标匹配的尺寸，比如MDI默认24px */
  width: 24px;
  height: 24px;
  /* 让图标在容器内水平居中 */
  text-align: center;
  /* 垂直居中图标 */
  line-height: 24px;
  vertical-align: middle;
  /* 清除默认内外边距避免额外偏移 */
  margin: 0;
  padding: 0;
}

2. 修正变换原点的计算规则 #

你已经设置了transform-origin: center center，但浏览器默认可能是基于容器而非图标自身的边界计算变换原点。加上transform-box: fill-box可以让变换基于图标自身的填充盒子，这是关键修复：

@keyframes spin-animation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spin:before {
  display: block;
  transform-origin: center center;
  /* 让变换原点基于图标自身的盒子 */
  transform-box: fill-box;
  -webkit-backface-visibility: hidden;
  -webkit-animation: spin-animation 2s linear infinite;
  animation: spin-animation 2s linear infinite;
}

3. 极端情况：用位移辅助居中 #

如果少数MDI图标本身的viewBox设计导致视觉偏移，还可以在变换里叠加位移修正，调整动画和伪元素样式：

@keyframes spin-animation {
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.spin:before {
  display: block;
  transform-origin: center center;
  transform-box: fill-box;
  /* 初始位移让图标居中 */
  transform: translate(-50%, -50%) rotate(0deg);
  -webkit-backface-visibility: hidden;
  -webkit-animation: spin-animation 2s linear infinite;
  animation: spin-animation 2s linear infinite;
}

先试试前两个方案，大部分情况下都能解决偏移问题～

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