如何在 css 网格中居中 div

Question

我的代码中有那个 jsx（ProfileUploads 的父级）：

    <div className="profileuploads-container">
      {items.map((item, index) => {
        return (
          <ProfileUpload
            key={index}
            images={item.images}
            Title={item.title}
            Location={item.location}
            Quantity={item.quantity}
            Price={item.price}
            id={item.id}
          />
        );
      })}
    </div>

与以下css

.profileuploads-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  text-align: center;
  grid-gap: 20px;
  justify-self: center;
  align-self: center;
}

ProfileUpload 看起来像这样：

    <div className="profileupload-container">
      <ImageGallery
        items={props.images}
        showFullscreenButton={false}
        showPlayButton={false}
        showThumbnails={false}
        showBullets={true}
        renderLeftNav={renderLeftNav}
        renderRightNav={renderRightNav}
      />
      <p className="title">{props.Title}</p>
      <p className="iconed">
        <img src={LocationIcon} alt="fasf: " />
        {props.Location}
      </p>
      <p className="iconed">
        <img src={PersonIcon} alt="asfa: " />
        {props.Quantity}
      </p>
      <p className="iconed">
        <img src={MoneyIcon} alt="fsafa: " />
        {props.Price}₾
      </p>
      <DeleteButton id={props.id} />
    </div>

CSS:

.profileupload-container {
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #e4e6e5;
  text-align: center;
  padding-bottom: 20px;
  height: 270px;
  width: 20vw;
  position: relative;
}

我想将网格中的元素居中。

Answer 1

我自己找到了答案。

.profileuploads-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px;
  justify-items: center; /*Added This Line*/
}

这将使网格中的项目居中

如何在 css 网格中居中 div

How to center div in css grid

html

css

centering

css-grid