Comment centrer une image dans ReactJS en utilisant CSS

Question

J'utilise ReactJS create-react-app pour créer un site Web. J'essaie de centrer une image sur ma page d'accueil horizontalement sur l'écran à l'aide de CSS, mais elle reste alignée à gauche.

J'ai le fichier .jpg importé dans un fichier .js avec une déclaration de classe et il apparaît sur la page mais il ne suit pas les modifications de classe que j'effectue dans mon fichier index.css.

// dans le fichier Cur.js

import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';

function Cur() {

    return (
      <div>
        <Image
          img src={cur} alt="cur" class="center"
          height={350}
          width={700}
        />
      </div>
    );

}

export default Cur;

// dans le fichier index.css

.center{
    text-align: center;
    display: block;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100%;
  }

Answer 1

mon problème manquait display: flex dans mes styles css. l'ajouter au reste des styles, a résolu mon problème.