html - flexbox justify-content 多个标签在彼此下方

Question

我有一个div带有 ah1和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>但没有做任何事情

标签： htmlcssflexbox

Answer 1

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

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