Как сделать встроенные элементы внешними внутри флексбокса

Question

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container span {
  border-bottom: 1px solid red;
}

<div class="container">
  <span>title</span>
  <div class="content">
  </div>
</div>

Я хочу, чтобы заголовок отображался в середине экрана как старый встроенный элемент. Но внутри гибкого контейнера он расширяется как элементы уровня блока.

Что мне здесь не хватает?

Демо: https://jsfiddle.net/rk5h5ph7/

Answer 1

Я не совсем понимаю, что вы хотите, но попробуйте одно из того, что я предложил.

Попробуйте добавить это к .container span:

text-align: center;

или добавьте это к .container:

align-items: center;

Answer 2

Заменить justify-content на align-itmes

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container span {
  border-bottom: 1px solid red;
}

<div class="container">
  <span>title</span>
  <div class="content">
  </div>
</div>