React-modal: Could I get help centering the contents of the modal?

[andrewoh531]

I'm not very good at CSS. I'm trying to center a loader in the modal both vertically and horizontally but having quite a difficult time doing so. I'm using halogen as my modal and the code is below. I've tried various different combinations of CSS but failing to get both the vertical and horizontal centering correct.

I'm not using flex, just bootstrap grids. If I could get some pointers would be greatly appreciated.

import { RingLoader } from 'halogen';
import React from 'react';
import ReactModal from 'react-modal';
import {connect} from 'react-redux';

class SpinnerModal extends React.Component {

  render() {

    return (

    <ReactModal
      isOpen={this.props.isLoading}
      contentLabel="Modal"
      style={{
        overlay : {
        },
        content : {
          position                   : 'absolute',
          top                        : '0px',
          left                       : '0px',
          right                      : '0px',
          bottom                     : '0px',
          border                     : 'none',
          background                 : '#fff',
          overflow                   : 'auto',
          WebkitOverflowScrolling    : 'touch',
          outline                    : 'none',
          backgroundColor            : 'rgba(200, 200, 200, 0.85)'
        }
      }}
      /*
       String className to be applied to the portal.
       See the `Styles` section for more details.
       */
      portalClassName="ReactModalPortal"
      /*
       String className to be applied to the overlay.
       See the `Styles` section for more details.
       */
      overlayClassName="ReactModal__Overlay"
      /*
       String className to be applied to the modal content.
       See the `Styles` section for more details.
       */
      className="ReactModal__Content"
      /*
       Boolean indicating if the appElement should be hidden
       */
      ariaHideApp={false}
      /*
       String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
       */
      role="dialog"
      /*
       Function that will be called to get the parent element that the modal will be attached to.
       */
      parentSelector={() => document.body}
    >
      <RingLoader color="#428bca" size="100px" margin="4em" styleName='loader-style'/>
    </ReactModal>

    );
  }
}

SpinnerModal.PropTypes = {
  isLoading: React.PropTypes.bool.isRequired
};

export default connect(state => state.app)(SpinnerModal);

[andrewoh531]

Figured it out by using the following CSS styling.

.loader-style { position: absolute; top: 40%; left: 50%; margin-top: -50px; margin-left: -50px; }