title: Element won't center inside Modal
body: <p>I'm currently using the React Bootstrap Modal. I'm trying to center an element within a modal with flexbox, but having a lot of trouble doing just that. Below is my code, and how it currently looks. </p>
  
  <p><a href="https://i.stack.imgur.com/8VSBg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8VSBg.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/yOvbW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yOvbW.png" alt="enter image description here"></a></p>
  
  <pre><code>import { Modal } from 'react-bootstrap'
  import React from 'react';
  import { Button } from 'react-bootstrap';
  import * as welcome from '../../styles/welcome'
  
  class Welcome extends React.Component{
  constructor(props){
     super(props)
     this.state = {
      showModal: true
   }
  this.close=this.close.bind(this)
  this.open=this.open.bind(this)
  }
  
   componentWillReceiveProps(nextProps){
    debugger
    if(nextProps.modal_content !== this.props.modal_content){
      this.setState({ showModal: true });
   }
  }
  
  close(){
    this.setState({ showModal: false });
  }
  
  open() {
    this.setState({ showModal: true });
  }
  
   render() {
  
  return (
    &lt;div&gt;
      &lt;Modal style={welcome.welcomeBody} show={this.state.showModal} onHide={this.close}&gt;
  
          &lt;div style={{display: 'flex', justifyContent: 'center'}}&gt;
             &lt;div style={{backgroundColor: 'black', border: '1px solid black', borderRadius: '100%', width: '50px', height: '50px'}}&gt;&lt;/div&gt;
         &lt;/div&gt;
  
  
      &lt;/Modal&gt;
    &lt;/div&gt;
  );
  }
   }
  </code></pre>
  
  <p>export default Welcome</p>