CSS 布局 Flexbox垂直居中

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

HTML

<div class="flexbox-centering">
  <div class="child">Centered content.</div>
</div>

CSS

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

说明

1. display: flex 启用弹性箱。
2. justify-content: center 将子元素水平居中。
3. align-items: center 将子元素垂直居中。