Css 在按钮中心添加加载器/微调器

我想使用CSS在我的按钮的中心添加一个微调器。每当按钮的宽度改变时，微调器应该在中心加载。如果设置边距，微调器位置将保持不变，且不会随按钮文本而改变，也不会与中心对齐。

.ic2 fa自旋蓝{
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
线高：1；
-webkit字体平滑：抗锯齿；
边框：3px实心#008ad6；
边界半径：50%；
边框顶部：3倍实心#F3；
宽度：20px；
高度：20px；
-webkit动画：ic2 spin 2s linear infinite；/*Safari*/
动画：ic2自旋2s线性无限；
-moz动画：ic2自旋2s无限线性；
-o-动画：ic2自旋2s无限线性；
/*位置：绝对位置；
/*左边距：1米*/
/*边缘顶部：6px；
右边距：自动；
左边距：自动*/
显示：块；
位置：绝对位置；
}
@-webkit关键帧ic2旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧ic2旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
.ic2蓝色btn{
颜色：#a3deff；
边框：1px实心#008ad6；
}
.ic2概述的btn{
边界半径：3px；
背景色：var（--白色）；
盒影：02px2p0rgba（0,0,0,0.05）；
字体系列：Roboto；
字号：17px；
字号：500；
/*线高：32px*/
文本对齐：var（--按钮对齐）；
填充：0px 16px；
边界半径：3px；
宽度：自动；
字距：8px；
高度：32px；
}

加载

将

position:relative

添加到

.ic2概述的btn

类

将此样式添加到

.ic2 fa spin blue

类

右：计算（50%-15px）；
顶部：2个；

您可以使用

top:calc（50%-13px）定位微调器；左：钙（50%-13px）。50%是从父级开始测量的，而13px是因为微调器的宽度/高度是
20px
，边框加上
6px
，总计
26px
，其中一半是
13px

同时在按钮
上设置
位置：相对
。ic2蓝色btn
，因此它将成为定位上下文（父项）


.ic2 fa自旋蓝{
边框：3px实心#008ad6；
边界半径：50%；
边框顶部：3倍实心#F3；
宽度：20px；
高度：20px；
显示：块；
位置：绝对位置；
顶部：钙（50%-13px）；
左：钙（50%-13px）；
动画：ic2自旋2s线性无限；
}
@关键帧ic2旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
.ic2蓝色btn{
位置：相对位置；
颜色：#a3deff；
边框：1px实心#008ad6；
}
.ic2概述的btn{
边界半径：3px；
背景色：var（--白色）；
盒影：02px2p0rgba（0,0,0,0.05）；
字体系列：Roboto；
字号：17px；
字号：500；
/*线高：32px*/
文本对齐：var（--按钮对齐）；
填充：0px 16px；
边界半径：3px；
宽度：自动；
字距：8px；
高度：32px；
}

加载
y是否尝试将加载文本放入span标记中？而不是在外面？