How Do I Center My Span Vertically In My Overlay Div?

I'm using Typescript, React.js and Bootstrap 3. I've got an overlay div that I position over the top of my detail content while I'm loading data from the server. In the overlay, I'

Solution 1:

You can use flexbox for this

letloadingOverlay=<divstyle={{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;}}><spanclassName="glyphiconglyphicon-refresh"style={{fontSize:50,animation:'spin 1s infinite linear'}}/></div>;letdetailPanel=<divclassName="well"style={{margin:2,padding:5}}><divstyle={{position:'relative'}}>
    {workingStatus&&loadingOverlay}
    {detailForm}
  </div>...</div>;

Solution 2:

You can use top: 50% and transform: translateY(-50%) to get the icon centered vertically. Like this:

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

---

You can see a working html demo below. I've removed the inline styles and added id's for readability:

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

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

<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"rel="stylesheet"/><divid="outer"><divid="inner"><spanclass="glyphicon glyphicon-refresh"></span></div></div>