Css 如何将Unicode数学符号完全置于其父元素的中心？

我正在尝试实现一个基于CSS的动画，其中包含一个Unicode字符：

HTML

<div class="spinner">⊗</div>

*在本例中，我省略了特定于供应商的前缀

但是，当我在浏览器（Firefox 20.0）中查看页面时，角色稍微偏离中心，导致动画“摆动”

你可以在这里看到它：

---

如何使字符完全居中？

您可以在

.spinner

上将

行高设置为
45px
，这将确保包含的
span
元素既高又宽。这是一个例子。现在有一点少的运动，但它仍然看起来像是一点也没有移动

另一种使其围绕字符中心旋转而不是围绕包含
span
的字符中心旋转的方法是使用
-vendorsspecificprefix transform origin
。您可以将其设置为围绕另一个点旋转，例如，将其设置为：
23px 34px
将为要旋转的点设置
x
和
y
坐标

我认为它看起来仍然会移动一点，这可能是因为角色没有被渲染成一个完美的圆，你可以尝试用不同的字体渲染它，改变字体的点大小，或者甚至打开
文本渲染：优化易读性打开或关闭可能会有所不同

-vendorSpecificRefix transform origin
的默认值为
50%50%
，这表明如果您确保元素内的角色完全居中，并且在包含的元素上设置动画，它应该围绕中心旋转，然后玩
-vendorsspecificprefix transform origin
，只会让事情变得更糟

我的另一个想法是，通过将文本的点大小设置为
42pt
，包含范围的宽度变为
45px
，现在
50%
，其中的
22.5px
，如果文本的点大小变大一点，可能会起作用，或者只需将包含范围的宽度和高度设置为
46px
，则
50%
将为
23px
，这可能会对当前移动产生影响

更新：

通过使用单空格字体
Courier
，手动设置
跨度
的
行高
、
高度
和
宽度
使字符居中，我能够将其完全居中（），然后使用
-webkit transform:translate（）
将角色移动
0.5px
，使其看起来更像一个圆

我认为我需要2个JSFIDLE来为不同的浏览器演示这一事实回答了这样一个问题，即是否应该这样做，我认为浏览器之间字体呈现的差异将确保在没有浏览器检测的情况下无法可靠地完成这一工作。
使用SVG进行概念验证

考虑以下几点：

<div class="wrap">
  <span class="spinner">
      <svg {...many other attributes...} class="logo">
         ...path code...
      </svg>
  </span>
</wrap>

我将
.logo
和
.spinner
的显示类型都设置为
block
，并且都具有相同的高度和宽度（使用方形框可获得最佳效果）

似乎很有效。最难的部分是学习如何设置SVG内联图像。我发现以下参考资料很有用：
查看“在Chrome中完全居中”今天在Chrome 61.0.3163.100上链接，它上下跳动大约3-5个像素，所以我认为这项技术非常脆弱。@uglycoyote，确实是，确实是，我希望答案不是试图把自己作为一种可靠的方法来推销，我只是在胡乱摆弄，看看当时能做些什么。在希望它能为未来的读者提供一些关于这个问题的见解/可能的方法，甚至只是为了展示已经尝试过或还没有尝试过的内容，如果SVG是一个选项，请务必选择SVG答案：）
.spinner {
    display: inline-block;
    font-size: 42pt;
    line-height: 50px;  
    height: 46px;
    width: 46px;
    margin: 50px;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    font-family: courier;
 }

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg) translate(0.5px, 0px)}
    to { -webkit-transform: rotate(360deg) translate(0.5px, 0px)}
}

<div class="wrap">
  <span class="spinner">
      <svg {...many other attributes...} class="logo">
         ...path code...
      </svg>
  </span>
</wrap>

.spinner {
    display: block;
    width: 50px;
    height: 50px;
    position: relative;
    top: 75px;
    left: 75px;
    animation: spin 1s infinite linear;
}
.logo {
    display: block;
    width: 50px;
    height: 50px;
}