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;
}