Wie zentriere ich meine Spanne vertikal in meinem Overlay div?

Question

Ich verwende Typescript, React.js und Bootstrap 3.

Ich habe eine Overlay-Div, die ich über den oberen Teil meines Detail-Inhalts positioniere, während ich Daten vom Server lade.

Im Overlay habe ich einen animierten Spinner, implementiert als span/glyphicon. Im folgenden Code funktioniert die textAlign, aber die verticalAlign nicht.

Kann mir jemand sagen, was falsch ist - was muss ich tun, damit der Spinner sowohl vertikal als auch horizontal zentriert wird?

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

können Sie flexbox verwenden für dieses

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

Sie top: 50% verwenden können und transform: translateY(-50%) das Symbol vertikal zentriert zu bekommen. Wie folgt aus:

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>; 

---

können Sie eine Arbeits html Demo siehe unten. Ich habe das Inline-Styles entnommen und ids zur besseren Lesbarkeit:

#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>