Html 在按钮上放一个加载div

我想给按钮添加动画加载效果。但我没有找到如何把这个div放在我按钮的中间。我不想使用绝对位置，因为这个动画必须适合我所有不同宽度大小的按钮

我希望动画覆盖按钮，但不溢出它

我做了一段我想做的事情：动画不在按钮的中心。这是我问题的主题

.btn{ 背景色：36ba2c； 边框颜色：36ba2c； 颜色：fff； 左边距：10px； 字号：1em； 边框：1px实心36ba2c； 线高：40px； 填充：0 15px； } .actionsBas{ 边缘顶部：20px； } .ld球体{ 位置：相对位置； 排名：0； 底部：0； 右：0； 左：0； 宽度：自动； 高度：自动； } .ld分区{ 位置：绝对位置； 宽度：21px； 高度：21px； 边界半径：50%； 背景：rgba54186430.7； 过滤器：39%； } .ld分区：第n-child1{ 动画：lds-ellipsis1 0.6s无限； } .ld分区：第n-child2{ 动画：lds-ellipsis2 0.6s无限； } .ld spheres分区：N-child3{ 左：30px； 动画：lds-ellipsis2 0.6s无限； } .ld分区：第n-child4{ 左：59px； 动画：lds-ellipsis3 0.6s无限； } @关键帧lds-ELLIPSS1{ 0% { 变换：scale0.1； } 100% { 变换：scale1； } } @关键帧lds-ELLIPSS3{ 0% { 变换：scale1； } 100% { 变换：scale0.1； } } @关键帧lds-ELLIPSS2{ 0% { 变换：translate0，0； } 100% { 变换：translate29px，0； } } 登记员 环空器 供给者

---

你很接近。有关更改，请参见内联注释

.btn{ 背景色：36ba2c； 边框颜色：36ba2c； 颜色：fff； 左边距：10px； 字号：1em； 边框：1px实心36ba2c； 线高：40px； 填充：0 15px； 位置：相对；/*添加此*/ 溢出：隐藏；/*隐藏外部流动的任何内容*/ } .actionsBas{ 边缘顶部：20px； } .ld球体{ 位置：绝对；/*设为绝对*/ 排名：0； 底部：0； 右：-100px；/*负片，因此仍以小按钮为中心*/ 左：-100px；/*如上所示*/ 宽度：80px；/*增加固定宽度*/ 高度：20px；/*增加固定高度*/ 边距：自动；/*将边距自动添加到中心*/ } .ld分区{ 位置：绝对位置； 宽度：21px； 高度：21px； 边界半径：50%； 背景：rgba54186430.7； 过滤器：39%； 左：0； } .ld分区：第n-child1{ 动画：lds-ellipsis1 0.6s无限； } .ld分区：第n-child2{ 动画：lds-ellipsis2 0.6s无限； } .ld spheres分区：N-child3{ 左：30px； 动画：lds-ellipsis2 0.6s无限； } .ld分区：第n-child4{ 左：59px； 动画：lds-ellipsis3 0.6s无限； } @关键帧lds-ELLIPSS1{ 0% { 变换：scale0.1； } 100% { 变换：scale1； } } @关键帧lds-ELLIPSS3{ 0% { 变换：scale1； } 100% { 变换：scale0.1； } } @关键帧lds-ELLIPSS2{ 0% { 变换：translate0，0； } 100% { 变换：translate29px，0； } } 登记员 极小的 供给者

---

在垂直中心？你的“因为”可能不是有效的；通过简单地将“上”、“下”、“左”和“右”设置为0，将“宽度/高度”设置为“自动”，使绝对定位的元素覆盖相对父元素的精确尺寸是非常容易的……是的，垂直和水平方向上，两个中心都尝试对相对父元素进行尺寸标注，但都不起作用。我想是因为childs分区的位置不好。