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've got an animated spinner, implemented as a span/glyphicon.

In the following code, the `textAlign` works, but the `verticalAlign` doesn't.

Can anyone tell what's wrong with this - what do I need to do to make the spinner be centered vertically as well as horizontally?

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

```