オーバーレイのdivにスパンを垂直に配置するにはどうすればよいですか？

Question

私はTypescript、React.js、Bootstrap 3を使用しています。

サーバーからデータをロードしている間に、詳細コンテンツの上にオーバーレイdivを配置しました。

オーバーレイには、アニメーションスピナーがあり、スパン/グリフコンとして実装されています。

次のコードでは、textAlignが機能しますが、verticalAlignは機能しません。

誰にでもこれが間違っていることを伝えることができます。スピナーを垂直に、水平にセンタリングするにはどうすればよいですか？

let loadingOverlay = <div style={{ 
    position: 'absolute', 
    opacity: 0.7, 
    width: '100%', 
    height: '100%', 
    color: 'white', 
    backgroundColor: 'DarkGrey', 
    zIndex: 1, 
    border: 0, padding: 0, margin: 0, 
    textAlign: 'center', 
    verticalAlign: 'middle', 

}}> 
    <span 
    className="glyphicon glyphicon-refresh" 
    style={{ 
     fontSize: 50, 
     animation: 'spin 1s infinite linear' 
    }} 
    /> 
</div>; 

let detailPanel = <div className="well" style={{margin: 2, padding: 5}}> 
    <div style={{position: 'relative'}}> 
    {workingStatus && loadingOverlay} 
    {detailForm} 
    </div> 
    ... 
</div>; 

Answer 1

あなたはアイコンが上下中央に取得するtop: 50%とtransform: translateY(-50%)を使用することができ、この

let loadingOverlay = <div style={{ 
    position: 'absolute', 
    opacity: 0.7, 
    width: '100%', 
    height: '100%', 
    color: 'white', 
    backgroundColor: 'DarkGrey', 
    zIndex: 1, 
    border: 0, padding: 0, margin: 0, 
    textAlign: 'center', 
    verticalAlign: 'middle', 
    display:flex; 
    align-items: center; 
    justify-content: center; 

}}> 
    <span 
    className="glyphicon glyphicon-refresh" 
    style={{ 
     fontSize: 50, 
     animation: 'spin 1s infinite linear' 
    }} 
    /> 
</div>; 

let detailPanel = <div className="well" style={{margin: 2, padding: 5}}> 
    <div style={{position: 'relative'}}> 
    {workingStatus && loadingOverlay} 
    {detailForm} 
    </div> 
    ... 
</div>; 

Answer 2

ためflexboxを使用することができます。このように：

let loadingOverlay = <div style={{ 
    position: 'absolute', 
    opacity: 0.7, 
    width: '100%', 
    height: '100%', 
    color: 'white', 
    backgroundColor: 'DarkGrey', 
    zIndex: 1, 
    border: 0, padding: 0, margin: 0, 
    textAlign: 'center', 

}}> 
    <span 
    className="glyphicon glyphicon-refresh" 
    style={{ 
     fontSize: 50, 
     animation: 'spin 1s infinite linear', 
     top: '50%', 
     transform: 'translateY(-50%)' 
    }} 
    /> 
</div>; 

let detailPanel = <div className="well" style={{margin: 2, padding: 5}}> 
    <div style={{position: 'relative'}}> 
    {workingStatus && loadingOverlay} 
    {detailForm} 
    </div> 
    ... 
</div>; 

---

あなたは、以下の作業のhtmlのデモを見ることができます。 Iインラインスタイルを削除し、読みやすくするためにidを追加しました：

#outer { 
 
    position: relative; 
 
    height: 200px; /*added for demo*/ 
 
} 
 

 
#inner { 
 
    position: absolute; 
 
    opacity: 0.7; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: white; 
 
    background-color: DarkGrey; 
 
    z-index: 1; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 

 
#inner span { 
 
    font-size: 50; 
 
    animation: spin 1s infinite linear; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="outer"> 
 
    <div id="inner"> 
 
    <span class="glyphicon glyphicon-refresh"></span> 
 
    </div> 
 
</div>