How to center div in css grid

I have that jsx in my code(Parent of 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>

With following 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 looks like this:

    <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;
}

I want to center that elements in grid.

Solution

I found the answer myself.

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

This will center items in grid