如何将框的内容垂直对齐到中心

Question

在下面的代码中，我试图将所有标题在中间垂直对齐，但它不能与垂直对齐一起使用，因为你可以在我的jsfiddle上看到：https://jsfiddle.net/Wosley_Alarico/exp1zjh6/1/

HTML：

<div class="captions">
  <h2>design</h2>
  <h1>create</h1>
  <h2>print</h2>
</div>

的CSS：

.captions { 
  display:flex;
  vertical-align:middle;
}
h1{
  font-size:28pt;
}

如何将h1放在中间的h2＆＃39;

Answer 1

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

Answer 2

将align-items: center;添加到 .captions

.captions {
  display: flex;
  vertical-align: middle;
  align-items: center;
}

Demo