Как перенести блок с тексом на другую строку во флексе?

Question

[Norum]

В блоке intro находится блок video, в котором располагается видео-фон и блок logo, в котором находится логотип. Чтобы расположить лого четко по середине я с позиционировал его с помощью флекса, но никак не могу понять, как сделать так, чтобы надпись make up перенеслась на следующую строчку и тоже находилась по середине?

<div class="intro">
        <div class="video">
            <video src="video.mp4" class="video_media" autoplay muted loop></video>
        </div>
          <div class="logo">
              <h1>KATYA LEER</h1>
              <span>makeup</span>
              
         </div>
    </div>

.intro {
   position: relative;
    max-height: 100vh;
    overflow: hidden;
    background: url(../img/video-bg.jpg) top no-repeat;
    background-size: cover;

}

.intro:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 2;
}

.video {
    
    padding-top: 0 !important;
    padding-bottom: 56.25%;
    z-index: 1;
}

.video_media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.logo {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
}


.logo h1 {
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 20px;
}

.logo span {
    font-size: 18px;
    letter-spacing: 10px;
}

Answer 1

[Lord_Dantes]

Добавьте .logo flex-direction: column;

Answer 2

[Андрей Мартынкевич]

.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 4;
    text-align: center;
}

Ну или если вы прям хотите оставить display: flex, то сделайте обёртку div'ом:

<div class="intro">
  <div class="video">
    <video src="video.mp4" class="video_media" autoplay muted loop></video>
  </div>
  <div class="logo">
    <div>
     <h1>KATYA LEER</h1>
     <span>makeup</span>
    </div>
  </div>
</div>

и установите для logo следующие стили:

.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    text-align: center;
}

Answer 3

[Steppp]

Добавьте .logo flex-wrap: wrap;