Не могу выровнять карточку по центру и сохранить её пропорции

Question

<section class="rent">
      <div class="container">
        <h2 class="rent-title">Rent a Luxury Car</h2>
        <div class="rent-cards">
          <div class="rent-card-one">
            <h3 class="rent-card-one-subtitle">Supercars</h3>
            <a href="#" class="rent-card-link">Discover</a>
            <img src="img/rent/arrow.png" alt="arrow" class="rent-card-img">
          </div>
          <div class="rent-card-two">
            <h3 class="rent-card-two-subtitle">Sportcars</h3>
            <a href="#" class="rent-card-link">Discover</a>
            <img src="img/rent/arrow.png" alt="arrow" class="rent-card-img">
          </div>
          <div class="rent-card-three">
            <h3 class="rent-card-three-subtitle">SUV</h3>
            <a href="#" class="rent-card-link">Discover</a>
            <img src="img/rent/arrow.png" alt="arrow" class="rent-card-img">
          </div>
          <div class="rent-card-four">
            <h3 class="rent-card-four-subtitle">Supersuv</h3>
            <a href="#" class="rent-card-link">Discover</a>
            <img src="img/rent/arrow.png" alt="arrow" class="rent-card-img">
          </div>
        </div>
      </div>
    </section>

CSS

/* rent */

.rent{
  margin-top: 60px;
  padding-bottom: 60px;
}

.rent-title{
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  text-align: center;
}

.rent-cards{
  margin-top: 40px;
  grid-template-columns: repeat(2, minmax(500px, 1fr));
  gap: 32px;
  display: grid;
}

.rent-card-one,
.rent-card-two,
.rent-card-three,
.rent-card-four{
  height: 524px;
  position: relative;
  max-width: 584px;
}

.rent-card-one{
  background: url(../img/rent/supercars.png);
}

.rent-card-two{
  background: url(../img/rent/sportcars.png);
}

.rent-card-three{
  background: url(../img/rent/suv.png);
}

.rent-card-four{
  background: url(../img/rent/supersuv.png);
}

.rent-card-one-subtitle,
.rent-card-two-subtitle,
.rent-card-three-subtitle,
.rent-card-four-subtitle{
  margin-top: 48px;
  margin-left: 48px;
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;

}

.rent-card-link{
  position: absolute;
  margin-bottom: 48px;
  margin-right: 90px;
  bottom: 0;
  right: 0;
}

.rent-card-img{
  position: absolute;
  margin-bottom: 42px;
  margin-right: 58px;
  bottom: 0;
  right: 0;
}

@media (max-width: 1130px){
  /* rent */
  .rent-cards{
    grid-template-columns:repeat(1, minmax(320px, 1fr));
    justify-content: center;
  }
}

Answer 1

В стилях изображения прописываете:

.rent-card-one,
.rent-card-two,
.rent-card-three,
.rent-card-four {
   position: relative;

   /* Позиционирование по горизонтали */
   left: 50%;
   transform: translateX(-50%)
 }

Answer 2

На просторах инета нашёл такое решение, вспомнив о том, что у карточек стоит position: relative:

.rent-card-one,
.rent-card-two,
.rent-card-three,
.rent-card-four{
  height: 524px;
  position: relative;
  max-width: 584px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

БЛОГ НА HUSL

Не могу выровнять карточку по центру и сохранить её пропорции

Ответы (2 шт):