react 如何引入图片， 背景图片， 盒子上下左右居中

import React, { Component } from 'react'
import Img from '@/assets/logo.png'  //这个图片，是src下assets文件夹
import './styles.less'

export default class Imgs extends Component {
  render() {
    return (
      <div className='pages_img' style={{ backgroundImage: `url(${Img})` }}>
        <section className='section'>
        </section>
        {/* <img src={Img} /> */}
      </div>
    )
  }
}

　　

.pages_img{
  height: 100%;
  max-width: 1920px;
  background: no-repeat center center;

　　//background: url("../../assets/logo.png")  no-repeat center center;　　//上面是通过 style 直接写的 如果不用style 在less 中 可以这样写

  margin: 0 auto;
  display: flex;
  section{
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.5);  //盒子背景半透明
    margin: auto auto;
    // opacity: 0.5  //盒子半透明
  }
}