CSS центрирование объектов внутри рамки с отображением: сеткой?

Question

У меня есть поле с текстом и несколько кнопок. Я часами пытался понять, как его центрировать. Наконец, я просто решил сделать отображение: сетку и выравнивание и выравнивание по центру. С точки зрения передовой практики, будет ли это приемлемым повторять? Есть ли лучший способ go центрировать его? Я попытался реализовать настройку поля cta для выравнивания текста по центру и контейнера для отображения: inline-block, но это тоже не сработало. Я уверен, что делаю простую ошибку, но не могу ее понять. Ниже он отлично работает с сеткой; Я просто хочу знать, есть ли способ лучше. Спасибо!

.cta-box {
    display:grid;
    align-content: center;
    text-align: center;
    margin: 11% 0 0 5%;
    width: 671px;
    height: 285px;
    border-bottom: 7px solid green;
    background-color: rgba(29, 60, 89, .70);

}

.cta-box-container{
    padding:0px 19px 2px 19px;
    height:100%;
    width:100%;
    
}

  
    <div class="cta-box">
            <div class="cta-box-container">
                <h1> We can facilitate your transportation needs.</h1>
                <p class="white_text">sfgsd sdgsdf sdfsd fsdf insert more text here about what it should say </p>
                
                   <div class="buttons_cta">
                    <a class="cta_contact" href="#">Contact Us</a>
                    <a href="#" class="cta_rates">See our Rates</a>
                    </div>
                </div>
            </div>
  

[enter image description here][1]

вот как это выглядит, когда я показываю flex на cta-box. [1]: https://i.stack.imgur.com/qSU5E.jpg

Answer 1

Это можно сделать с макетом flex.

.cta-box {
  margin: 11% 0 0 5%;
  width: 671px;
  height: 1140px;
  border-bottom: 7px solid green;
  background-color: rgba(29, 60, 89, .70);
}

.cta-box-container{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
    height:100%;
    width:100%;
}

<div class="cta-box">
  <div class="cta-box-container">
    <h1> We can facilitate your transportation needs.</h1>
    <p class="white_text">sfgsd sdgsdf sdfsd fsdf insert more text here about what it should say </p>

    <div class="buttons_cta">
      <a class="cta_contact" href="#">Contact Us</a>
      <a href="#" class="cta_rates">See our Rates</a>
    </div>
  </div>
</div>