title: Centering Image with react / react-bootstrap / flexbox
body: <p>I am using versions:</p>
  
  <pre><code>react@16.8.6
  react-bootstrap@1.0.0-beta.8
  </code></pre>
  
  <p>I am getting confused a little bit about what is supposed to do what between react, react-bootstrap and flexbox.  I have a simple image definition in a file called LoginImage.js :</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Image } from "react-bootstrap";
  
  class LoginImage extends Component {
    render() {
      return (
        &lt;Image width="150" src="/staff_login.jpg" /&gt;
      );
    }
  }
  
  export default LoginImage;
  </code></pre>
  
  <p>I am using it in the App.js file like so:</p>
  
  <pre><code>import LoginImage from './LoginImage'
  ...
      &lt;Container&gt;
        &lt;Row&gt;
          &lt;Col xs={12} sm={4} md={4}&gt;
            &lt;LoginImage /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
  </code></pre>
  
  <p>I know that CSS3 and Flexbox offer "justify-content" and "align-items" to position horizontally and vertically respectively, but it isn't clear where I am supposed to use them in the above code or if that is even the best way to center the image given what I have above.</p>
  
  <p>I appreciate any help.  Thanks.</p>