Question

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

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

问题：

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

假设：

我一直在修补这个位置和其他一些选择，但我不确定。我认为从顶部元素向下工作的“树”需要处于某种状态，以允许我垂直居中于div ...但不确定它可以实现什么或如何实现？

.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为我工作。

{{1}}

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

如何将图片加载到重叠

2 个答案: