How to move a block with text to another line in flex?

Question

css

The intro block contains the video block, which contains the video background, and the logo block, which contains the logo. To place the logo clearly in the middle, I positioned it using flex, but I just can’t figure out how to make the make up inscription move to the next line and also be in the middle?

<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

Add.logo flex-direction: column;

Answer 2

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

Well, or if you directly want to leave display: flex, then wrap it with a 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>

and set the following styles for the 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

Add .logo flex-wrap: wrap;