Вертикальное выравнивание двух элементов

Question

<header> 
    <h1>Title</h1> 
    <h2>Subtitle</h2> 
</header> 

Мне нужно вертикально выровнять h1 и h2 внутри заголовка. H2 должен быть ниже h1. Есть ли способ сделать это с помощью flex без упаковки тегов h1 и h2?

---

РЕДАКТИРОВАТЬ

Просто чтобы быть ясно - H1 и H2 должны быть выровнены по вертикали внутри заголовка. H1 и H2 должны располагаться один за другим.

Answer 1

Вот что вы хотите

<style> 
header{ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 
h1,h2{ 
    text-align: center; 
} 
</style> 

<header> 
    <h1>Title</h1> 
    <h2>Subtitle</h2> 
</header> 

Answer 2

Вы можете сделать это с помощью flexboxes.

header{ 
 
    border: 2px solid red; 
 
    height: 70vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
h1,h2{ 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
h1{ 
 
    background: red; 
 
} 
 

 
h2{ 
 
    background: yellow; 
 
}

<header> 
 
    <h1>Heading 1</h1> 
 
    <h2>Heading 2</h2> 
 
</header>