Html 中心分区内分区

我知道这是个难题，但我被困在这件事上了

在这种情况下，如何垂直和水平居中“滑动加载”div

.blueimp-gallery > .slides > .slide-loading

类为“blueimp gallery”的元素的位置已固定。 类为“slides”的元素具有相对位置。 类为“slide loading”的元素是一个简单的CSS预加载程序（没有指定位置）

---

解决方案：

您可以使用

transform

css属性来实现这一点，方法如下：

  position: absolute;
  top: calc(50% - 30px); //minus half the height of your spinner (30px)
  left: calc(50% - 30px); //minus half the width of your spinner (30px)
  transform: translate(-50%, -50%);

---

---

代码片段：

正文{
保证金：0；
}
* {
框大小：边框框；
}
.rulerX，
.规则{
位置：绝对位置；
z指数：9999；
背景色：红色；
}
.rulerX{
顶部：计算值（50%-.5px）；
高度：1px；
宽度：100%；
}
.规则{
左：计算值（50%-.5px）；
宽度：1px；
身高：100%；
}
蓝精灵画廊{
位置：相对位置；
边框：3件纯蓝；
高度：100vh；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}
.幻灯片{
身高：100%；
边框：3个点白色；
位置：相对位置；
背景色：#262626；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
.blueimp gallery>.slides>。幻灯片加载{
边框：4px实心#F3；
边界半径：50%；
边框顶部：4px实心#3498db；
宽度：60px；
高度：60px；
-webkit动画：旋转1s线性无限；
动画：旋转1s线性无限；
位置：绝对位置；
顶部：钙（50%-30px）；
左：计算（50%-30px）；
转换：翻译（-50%，-50%）；
}

---

提供小提琴或片段！

  position: absolute;
  top: calc(50% - 30px); //minus half the height of your spinner (30px)
  left: calc(50% - 30px); //minus half the width of your spinner (30px)
  transform: translate(-50%, -50%);