How to make my picture both vertical and horizontal center? - css

Question

I was using react.js to build a template website.
When I build the first component, I met the problem.
the problem:
the picture is not in the middle of the page(I mean in vertical and in horizontal)
I have already use CSS flex to make it in the middle.
Why my picture's position is not in the middle of the page?
Just put that picture in that circle.
How to do that?
Here is my Center.js:
import React from 'react';
import image from './images/5.png'
import './Center.css';
const Center = () =>{
return(
<div id="center2">
<img id="center" alt="center" src={image}/>
</div>
);
}
export default Center
my app.js:
import React, { Component } from 'react';
import Center from './Components/Center';
class App extends Component {
render() {
return (
<div>
<Center/>
</div>
);
}
}
export default App;
my center.css:
#center2{
text-align:center;
}
#center{
width:300px;
height:300px;
}
my webpage on localhost 3000

Answer 1

If they are static you need to import it:
import image from './images/5.png'
return (
<div id='center'>
<img src={image} />
</div>
)
otherwise you need to move images folder to public directory, and access it by
<div id='center'>
<img src='./images/5.png' />
</div>
And this is the CSS to make that image on center:
#center2 {
display: flex;
justify-content: center;
align-items: center;
}