flexbox在每个标签下对齐内容多个标签

Question

我有一个带有div和h1标签的h2，我的目标是在水平和垂直方向上居中，这是我在使用flexbox，但这就是我的代码的作用

 --------------
|              |
|     h1h2     |
|              |
 --------------

我的目标是这个

 --------------
|              |
|     h1       |
|     h2       |
|              |
 --------------

我的html：

<div class="announcement">
    <h1>h1</h1>
    <h2>h2</h2>
</div>

我的CSS：

.announcement {
   display: flex;
   align-items: center;
   justify-content: center;
}

我尝试在<br>之后做<h1>，但没有做任何事情

Answer 1

给flex-direction: column;。默认情况下，flex布局的方向是row

.announcement {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}