Alinhar Texto e Imagem com Flex

Bom dia, estou fazendo um site com FlexBox porém estou com dificuldade de seguir o layout que criei no adobe XD.

Especificamente nesta parte.
Gostaria de saber como posso fazer aquele texto ali, alinhado e ter a imagem alinhada ao meio também.
Sou novo em html e css e to com bastante dificuldade pra alinhar as coisas e tudo mais

segue código





<title>Andre Fotografia</title>
</head>
<body>
<header>
    <div class="container">
        <div class="logo"> MEU LOGO </div>
        <div class="menu">
            <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Discover</a></li>
                    <button> Contact Us</button>
                </ul>
            </nav>
        </div>
    </div>
</header>
<section id="banner">
    <div class="container">
        <div class="banner_headline"> Meu nome é André Luiz</div>
        
    </div>
</section>
</body>
</html>

* {

    font-family: SF Pro Display;

}

body {

    margin: 0;

    padding: 0;

}

header {

    display: flex;

    justify-content: center;

    height: 90px;

}

.container {

    display: flex;

    justify-content: space-between;

    width: 1000px;

}

.logo {

    display: flex;

    line-height: 80px;

    align-items: center;

    color: #0B9ED9;

    font-weight: bold;

}

.menu {

    display: flex;

    line-height: 80px;

    align-items: center;

}

nav ul,

nav li {

    list-style: none;

    margin: 0;

    padding: 0;

}

nav ul {

    display: flex;

}

nav a {

    display: block;

    text-decoration: none;

    color: #707070;

    padding: 20px;

}

button {

    margin: auto;

    border: none;

    width: 130px;

    height: 30px;

    border-radius: 100px;

    background-color: #F25CA2;

    color: #FFFFFF;

   

}

/* section */

.banner_headline {

    flex: 1;

    background-color: red;

}

.imagem_principal {

   flex: 1;

   display: flex;

   flex-direction: column;

   justify-content: center;   

   background-color: teal;

}

Obrigado!

.classemae {

  display: flex;

  justify-content: center;

  align-items: center;

}

No CSS você coloca na classe mãe do texto e da imagem o " display: flex; justify-content: center; align-items: center.

Quando você usa flex-box, o display: flex; tem que ir na classe mãe para modificar os filhos.