如何绝对地将覆盖字体的真棒图标置于叠加

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/桌子就足够了。

我尝试使用;

的示例

中心内容在绝对定位的div

中

使用Display的中心：表（Switt I FA图标要跨越显示）

https://jsfiddle.net/39l7tqbr/

结果是 - 繁忙的指导损失背景色彩内容仍然不垂直居中

缺少某些课程，或者我的工作比需要更复杂？？？

Answer 1

要实现这一目标并将图标制成中心，我们需要在另一个元素内包装<i> tage另一个<div>，因为如果我们尝试将<i>直接居中，我们将有某种类型与字体令人震惊的动画发生冲突，因此我们只需要将<i>标签包装的DIV中心：

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%);
}

这将使图标中心繁忙的辅助div