2つの要素を垂直に整列する

Question

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

ヘッダーの内側にh1とh2を垂直に配置する必要があります。 h2はh1以下にする必要があります。 h1タグとh2タグをラップすることなくflexでこれを行う方法はありますか？

---

EDIT

ただ明確にする - 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

このようなフレックスボックスで行うことができます。ここで

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>