IE11 Spinner Positioning

[foxmicha]

In IE11, the spinner is positioned at the top of whatever container you place it in. In Chrome and FireFox, the spinner is always positioned in the center of the container.

IE11:

Chrome:

Any help is appreciated. Code added to standard create-react-app:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LoadingOverlay from 'react-loading-overlay';

class App extends Component {
  render() {
    return (
      <div className="App">
        <LoadingOverlay active spinner animate text='Loading...'>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
            
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </LoadingOverlay>
      </div>
    );
  }
}

export default App;

[tkforce]

One workaround is to add custom CSS to override ._loading_overlay_content

._loading_overlay_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}