如何絕對中心疊加Font Awesome圖標？

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>

最初開始時，如果事情可以上完成該表，而不是像在使用:: before之前在表之後添加元素 - 但我認爲問題無法在前/後內容上執行html？表

靈活的寬高，如果工作的任何元素將是巨大的，但DIV /表更多的則不夠。

我嘗試使用來自實施例;

Center content in a absolute positioned div

中心使用顯示：表（開關I FA圖標跨越用於顯示文本）

https://jsfiddle.net/39L7tqbr/

結果是 - 忙指示符損失背景顏色 和內容還沒有垂直中心

一些類丟失，還是我做複雜得多，需要的是????

Answer 1

實現這一目標，並在中心的圖標，我們需要換另一種元素的另一個<div>例如內<i>踏歌，因爲如果我們試圖居中<i>直接我們會有某種衝突與字體要命動畫，所以我們只需要居中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