我正在尝试实现一个涉及单个 Unicode 字符的基于 CSS 的动画：
HTML
<div class="spinner">⊗</div>
CSS
.spinner {
display: inline-block;
font-size: 42pt;
margin: 50px;
animation: spin 0.5s infinite linear;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
* 我在这个例子中省略了供应商特定的前缀。
但是，当我在浏览器 (Firefox 20.0) 中查看页面时，角色稍微偏离中心，导致动画“摇摆不定”。
你可以在这里看到它：http://jsfiddle.net/bBaVN/77/
我怎样才能使角色完全居中？
【问题讨论】：
标签： css unicode centering css-animations
使用 SVG 的概念证明
考虑以下几点：
<div class="wrap">
<span class="spinner">
<svg {...many other attributes...} class="logo">
...path code...
</svg>
</span>
</wrap>
见小提琴：http://jsfiddle.net/audetwebdesign/3G3U7/
我在以下位置找到了符号的 SVG 版本：
http://www.fileformat.info/info/unicode/char/2297/index.htm
我必须获取 SVG，在 Adobe Illustrator 中打开它，然后使用 object->artboards->fit to artwork bounds 重置视口（边界框？）。
然后我保存为 SVG，然后将 <svg> 块剪切粘贴到演示中，最后，我将 class="logo" 属性添加到 <svg> 标记中。
对于样式，我使用了以下 CSS：
.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;
}
我将.logo 和.spinner 的显示类型设置为block，并且两者具有相同的高度和宽度（使用方框以获得最佳效果。
似乎有效。最难的部分是学习如何设置 SVG 内联图像。我发现以下参考资料很有用：http://css-tricks.com/using-svg/
【讨论】：
您可以在.spinner 上将line-height 设置为45px，这将确保包含的span 元素与宽度一样高。这是jsFiddle。现在运动少了一点，但它仍然看起来一点也不在动。
另一种让它围绕角色中心而不是围绕包含span 的中心旋转的方法是使用-vendorspecificprefix-transform-origin。您可以将其设置为围绕另一个点旋转，例如将其设置为：23px 34px 将设置 x 和 y 坐标，以便点旋转。
我认为它看起来仍然有点移动的事实可能是由于字符没有被渲染为一个完美的圆圈，您可以尝试用不同的字体渲染它，改变字体的点大小，或者即使打开或关闭text-rendering: optimizelegibility; 也可能会有所不同。
-vendorspecificprefix-transform-origin 的默认值为50% 50%，这表明如果您确保元素内的角色完全居中，并在包含元素上设置动画，则它应该完全围绕中心旋转，然后玩-vendorspecificprefix-transform-origin只会让事情变得更糟。
我的另一个想法是，通过将文本的点大小设置为42pt，包含跨度的宽度变为45px，现在50% 将是22.5px，也许它会工作如果您将文本的磅值设置得更大一些，或者只是将包含跨度的宽度和高度设置为46px，那么50% 将是23px，这可能会与当前移动有所不同。
更新：
通过使用单空间字体Courier，手动设置@ 的line-height、height 和width，我能够让它在Chrome (and in FireFox) 中完美居中987654348@ 使角色居中，然后通过使用-webkit-transform: translate() 将其移动0.5px 来强制角色看起来更像一个圆圈。
.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)}
}
我认为我需要 2 个 jsFiddle 来为不同的浏览器演示这一事实回答了你是否应该这样做的问题，我认为浏览器之间字体渲染的差异将确保你不能这样做这在没有浏览器检测的情况下可靠。
【讨论】：