Как центрировать div в другом div, используя flexbox?

Question

Я хочу сделать изображение заголовка с полукруглым дном. В середине этого изображения я хочу заголовок и кнопку. Я не могу центрировать div с заголовком и кнопкой, используя только flexbox или bootstrap. mx-auto (margin x auto) работает, но my-auto не работает, классы align-self-center и align-items-center не работают, я должен добавить mx-auto. Чтобы центрировать круглое дно, я должен использовать margin-left: -25vw. Каков наилучший способ центрировать те дивы?

Это мой код:

.image-wrapper {
 position: relative;
 width: 100vw;
 height: 100%;
 overflow: hidden;
}

.circular-bottom {
  width: 150vw;
  height: 90vh;
  margin-left: -25vw;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  overflow: hidden;
}

.circular-bottom img {
  z-index: -1;
}

.title-box {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.title-text {
  text-align: center;
  width: 40%;
 }

<div class="image-wrapper">
  <div class="circular-bottom d-flex justify-content-center">
    <img src="url/image" draggable="false">
   </div>
   <div class="title-box d-flex">
    <div class="title-text align-self-center">
      <h1>Title</h1>
      <a class="btn" href="#">button text</a>
    </div>
  </div>
</div>

Обертка изображения предотвращает горизонтальную прокрутку. Круглое основание делает нижнюю часть изображения круглой, используя скрытое переполнение, оно шире для формы круга. Это также причина, по которой изображение не является фоновым изображением, его необходимо обрезать с помощью скрытого переполнения.

Answer 1

Добавление свойства justify-content: center в гибкий контейнер (в данном случае .title-box) должно работать следующим образом:

.image-wrapper {
 position: relative;
 width: 100vw;
 height: 100%;
 overflow: hidden;
}

.circular-bottom {
  width: 150vw;
  height: 90vh;
  margin-left: -25vw;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  overflow: hidden;
}

.circular-bottom img {
  z-index: -1;
}

.title-box {
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.title-text {
  text-align: center;
  width: 40%;
 }

<div class="image-wrapper">
  <div class="circular-bottom d-flex justify-content-center">
    <img src="url/image" draggable="false">
   </div>
   <div class="title-box d-flex">
    <div class="title-text align-self-center">
      <h1>Title</h1>
      <a class="btn" href="#">button text</a>
    </div>
  </div>
</div>

Я уже попробовал это, и это работает для меня.

Ссылка на рабочий код ручки: https://codepen.io/anon/pen/YLOwxX