如何使我的图片既垂直又水平居中？

Question

我正在使用react.js建立模板网站。

构建第一个组件时，我遇到了问题。

问题：

图片不在页面中间（我的意思是垂直和水平）

我已经在中间使用CSS flex了。

为什么我的图片位置不在页面中间？

只需将图片放在那个圆圈中即可。

该怎么做？

这是我的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

我的app.js：

   import React, { Component } from 'react';
   import Center from './Components/Center';

   class App extends Component {
  render() {
    return (
     <div>
         <Center/>
      </div>
    );
  }
 }

export default App;

我的center.css：

#center2{
text-align:center;
}
#center{
  width:300px;
  height:300px;
}

我在localhost 3000上的网页

Answer 1

如果它们是静态的，则需要将其导入：

import image from './images/5.png'

return (
    <div id='center'>
        <img src={image} />
    </div>
)

否则，您需要将images文件夹移至public目录，并通过以下方式进行访问

<div id='center'>
    <img src='./images/5.png' />
</div>

这是使图像居中的CSS：

#center2 {
  display: flex;
  justify-content: center;
  align-items: center;
}