div中心div

Question

我知道这是一个noob问题，但我坚持这件事。

如何垂直和水平居中＆＃34;滑动装载＆＃34; div在这种情况下？

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

带有课程的元素＆＃34; blueimp-gallery＆＃34;有固定的位置。 课程元素＆＃34;幻灯片＆＃34;有相对的位置。 类＃34;滑动加载＆＃34;是一个简单的CSS预加载器（没有指定位置）。

.blueimp-gallery > .slides > .slide-loading {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Answer 1

<强> SOLUTION：

您可以使用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%);

jsFIDDLE

CODE SNIPPET

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.rulerX,
.rulerY {
  position: absolute;
  z-index: 9999;
  background-color: red;
}
.rulerX {
  top: calc(50% - .5px);
  height: 1px;
  width: 100%;
}
.rulerY {
  left: calc(50% - .5px);
  width: 1px;
  height: 100%;
}
.blueimp-gallery {
  position: relative;
  border: 3px solid royalblue;
  height: 100vh;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.slides {
  height: 100%;
  border: 3px dotted white;
  position: relative;
  background-color: #262626;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.blueimp-gallery > .slides > .slide-loading {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  transform: translate(-50%, -50%);
}

<div class="blueimp-gallery">
  <div class="rulerX"></div>
  <div class="rulerY"></div>
  <div class="slides">
    <div class="slide-loading">

    </div>
  </div>
</div>