如何绝对居中一个覆盖字体可怕的图标？

Question

一直试图获得一个覆盖效果与图标显示正在进行。

之后是得到图标/文本绝对集中在灰色空间。也不显示与类隐藏-或删除类显示这个繁忙的覆盖。

试过保证金:0自动和保证金:汽车没有太多的运气。使用宽度:100%和高度在不同组合中有不同的效果。

下面是一个基本设置

https://jsfiddle.net/f8eo7y3w/1/

​

table {
  width:100px;
  height: 100px;
}

.busy-indicator {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.33);
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class='container'>
  <div class="row">
    <div class="col-xs-12">
      <p>
        some other stuff not busy
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-10">
      <div>
        <table class='busy'>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
        </table>

        <div class="busy-indicator">
          <i class="fa fa-spin fa-refresh"></i>
        </div>

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



  <div class="row">
    <div class="col-xs-12">
      <p>
        some other stuff not busy
      </p>
    </div>
  </div>
</div>

​

最初的开始是如果可以在表上做一些事情，而不是在表后面添加一个元素，比如使用：：html -但是我认为在前/后内容上不能做html的问题吗？

灵活的表宽高度，如果在任何元素上工作都会很好，但是div/table就足够了。

我试着用例子；

Center content in a absolute positioned div

使用显示中心:表(切换i图标以跨越显示的文本)

https://jsfiddle.net/39L7tqbr/

结果是-忙碌指示器丢失，背景色和内容仍然没有垂直中心。

某个班少了，还是我变得比需要复杂？

Answer 1

为了实现这一点，并使图标位于中间，我们需要在另一个元素(例如，另一个<i> )中包装<div>，因为如果我们试图直接对<i>进行居中，我们将与字体- and动画产生某种冲突，因此我们只需要将div包装在<i>标记的中间：

HTML:

<div class="busy-indicator">
  <div>
      <i class="fa fa-spin fa-refresh"></i>
  </div>
</div>

CSS:

.busy-indicator > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这将使图标在busy-indicator div中居中。