title: How to center an image in ReactJS using css
body: <p>I am using ReactJS create-react-app to build a website. I'm trying to center an image on my homepage horizontally across the screen using css, but it is remaining aligned left.</p>
  
  <p>I have the .jpg being imported into a .js file with a class declaration and it appears on the page but it doesn't follow the class modifications I am making in my index.css file.</p>
  
  <p>//in Cur.js file</p>
  
  <pre><code>import React from 'react';
  import Image from 'react-image-resizer';
  import cur from './cur.jpg';
  
  function Cur() {
  
      return (
        &lt;div&gt;
          &lt;Image
            img src={cur} alt="cur" class="center"
            height={350}
            width={700}
          /&gt;
        &lt;/div&gt;
      );
  
  }
  
  export default Cur;
  </code></pre>
  
  <p>//in index.css file </p>
  
  <pre><code>.center{
      text-align: center;
      display: block;
      justify-content: center;
      align-items: center;
      margin: auto;
      width: 100%;
    }
  </code></pre>