Flexbox居中

使用flexbox在父元素中水平和垂直居中子元素。

• 使用display: flex创建一个flexbox布局。
• 使用justify-content: center将子元素水平居中。
• 使用align-items: center将子元素垂直居中。

<div class="flexbox-centering">
  <div>居中内容。</div>
</div>

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}