如何绝对居中覆盖的 Font Awesome 图标？

Question

一直在尝试通过图标显示获得叠加效果。

之后是让 icon/text 绝对居中在灰色 space 中。并且不显示 class 隐藏 - 或删除显示此繁忙叠加层的 class。

尝试过 margin: 0 auto 并且 margin:auto 运气不佳。在不同的组合中使用 width:100% 和高度会产生不同的效果

这是基本设置

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>

最初的开始是如果可以在 table 上完成某些事情，而不是像使用 ::before 那样在 table 之后添加一个元素 - 但我认为无法做到的问题 html关于before/after内容?

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

我尝试使用来自的示例；

Center content in a absolute positioned div

使用 display:table 居中（将 i fa 图标切换为跨文本显示）

https://jsfiddle.net/39L7tqbr/

结果是 - 繁忙指示器丢失背景色并且内容仍未垂直居中

一些 class 丢失了，或者我做的比需要的更复杂？？？？

Answer 1

为了实现这一点并使图标居中，我们需要将 <i> 标记包裹在另一个元素中，例如另一个 <div>，因为如果我们尝试将 <i> 居中直接我们将与 font-awsome 动画发生某种冲突，所以我们只需要将 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%);
}

这将使 忙碌指示器 中的图标居中 div

如何绝对居中覆盖的 Font Awesome 图标？

How to absolutly center an overlaid Font Awesome icon?

overlay

center

css-position

absolute

font-awesome