自适应宽高且水平垂直居中

div {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px 20px ;
        div {
            display: flex;
            flex-direction: column;
            span {
                display: block;
                font-size: 16px;
                font-weight: normal;
                text-align: center;
            }
            div {
                position: relative;
                background-color: #fff;
                padding-bottom: 53%;
                img {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
        }
    }

 <div>
    {prdArr.map((item, index) => (
      <div key={index}>
        <div>
          <Image src={item.img} alt={item.title} />
        </div>
        <span>{item.title}</span>
      </div>
    ))}
  </div>