Question

我正在使用font-awesome来加载我的加载通知，但是让我发疯的是只有轻微的偏移导致旋转有一个“摆动”

HTML

<div class="loading-div fa fa-cog fa-spin"></div>

CSS

.loading-div{
    position: absolute;
    z-index: 9999;
    font-size: 200px;
}

我注意到它包含div不是正方形，但如果我尝试将高度，宽度设置为静态像素，它只会变得更糟......想法？

Answer 1

正如你自己所说的那样，div并不是正方形，所以会给你一些＆＃34;摆动＆＃34;因为它旋转。将line-height（而不是height）和width属性设置为相等的值，并将text-align设置为center，这样可以为您解决问题。

如果它仍然有轻微的晃动＆＃34;那么它可能只是您浏览器中的渲染问题。我相信Font Awesome已经过优化，可以14px或其倍数显示，因此请尝试将font-size缩减为196px。

Here是一个更新的小提琴，有2个动画，第一个是尺寸设置，第二个是尺寸设置，font-size缩小。

这是一个提取物，其属性与＆＃34;修复＆＃34;属性相关：

.loading-div{
    font-size:196px;
    line-height:200px;
    text-align:center;
    width:200px;
}

Answer 2

要水平居中，请使用此（相关CSS）：

.stripes{
    text-align: center;
}

.loading-div{
    display: inline-block;
}