如何在叠加层上居中加载图像

Question

我已经尝试了所有我能在 SO 上找到的东西，所以我希望有人能指出我做错了什么。我知道有很多帖子，但请相信我，我已经尝试过了，似乎都是这些帖子...

下图中的内容区域将根据绑定数据量的需要进行扩展，我只设法将加载器水平居中，但不确定如何使其位于叠加层的中心.还值得一提的是，我正在使用 bootstrap.

问题：

如何在另一个 div 中垂直居中加载动画？

假设：

我一直在修改位置和其他一些选项，但我不确定。我在想 "tree" 从顶部元素向下工作需要处于某种状态才能让我将 div 垂直居中......但不确定它可以实现什么或如何实现？

Working Fiddle 或下面的片段...

.overlay {
  width: 100%;
  height: 100%;
  background: grey;
  border-radius: 5px;
}
.overlay .overlay-modal {
  line-height: 200px;
  position: relative;
  border-radius: 5px;
  z-index: 11;
  margin: 0 auto;
}
.overlay .overlay-modal p {
  background-color: #f1c40f;
  width: 300px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  color: white;
  border-radius: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<br/>
<div class="container-fluid">
  <div class="col-md-2 sidebar well">
    Some Menu
  </div>
  <div class="col-md-6 main">

    <div class="container-fluid overlay">
      <div class="overlay-modal">
        <p><i class="fa fa-gear fa-spin"></i>
        </p>
      </div>

      <div class="row">
        <div class="col-md-12">
          <h3>Employee</h3>
          <p>
            Content
          </p>
          <p>
            Content
          </p>
          <p>
            Content
          </p>
          <p>
            Content
          </p>
          <p>
            Content
          </p>
        </div>
      </div>

    </div>
  </div>
  <div class="col-md-4 main">
    Other content
  </div>
  <div>

Answer 1

您将相对位置放在了错误的元素上。

.overlay { 
     position: relative;
}

而不是

.overlay-modal { 
     position: relative;
}

Answer 2

使用这个 CSS 对我有用。

.overlay .overlay-modal {
    line-height: 200px;
    position: absolute !important;
    top: 50%;
    left: 50%;
    border-radius: 5px;
    z-index: 11;
    margin: 0 auto;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

有什么理由不能使用 position: absolute;

如何在叠加层上居中加载图像

How to center loading image on overlay

css

overlay

vertical-alignment