html - 垂直和水平居中图标而不明确定义宽度？

我正在页面中间显示一个加载微调器。一切正常，它显示正确，居中。但是，我希望能够使我的CSS足够强大，以便在加载微调器样式发生变化时，即使使用新尺寸，它仍然保持居中。

CSS：

body.loading > .fa-spinner {
    display: inline-block;
    opacity: 1;
    position: absolute;
    /* TODO: Is it possible to make this not dependent on the size of height/width of the loading symbol? */
    top: calc(50% - 23px);
    left: calc(50% - 24.5px);
    color: #4EA6EA;
}

HTML：

<body class="loading">
    <i class="fa fa-spinner fa-spin i-4x"></i>
</body>

我的微调器目前是49w x 46h

我仍然支持我的显示样式，只要仍支持font-awesome旋转图标（我认为所有显示样式都可以。）只需要在最新版本的Google Chrome中支持CSS。

我有可用的CSS选项吗？

垂直和水平居中图标而不明确定义宽度？

0 个答案: