如何使用 flex 在 CSS 中居中内容

Flexbox 是 CSS3 实现的一种新布局模式，使得网页中的元素可以更加灵活地排列和分配空间。其中，flex 属性可以用来控制元素在主轴上的分配空间，从而实现内容的居中。本文将介绍如何使用 flex 在 CSS 中居中内容。

水平居中

对于一个想要水平居中的元素，我们需要在它的父元素上设置 display: flex，以启用 flex 布局，然后再将它的 justify-content 属性设置为 center，表示沿着主轴居中对齐。

.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* 其它样式 */
}

这时，子元素的宽度可以是固定的，也可以是自适应的，只要父元素的宽度足够，子元素就能够水平居中。

垂直居中

若想要进行垂直居中，我们先需要将父元素的 align-items 属性设置为 center，以表示沿着交叉轴居中对齐。但是，此时子元素仍然位于顶部位置。

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

.child {
  /* 其它样式 */
}

为了真正实现垂直居中，我们需要进一步设置子元素自身的 margins 属性为 auto。这是因为 margin 的自动分配规则会将剩余空间平分到 margin 上，从而使子元素垂直居中。

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

.child {
  margin: auto;
  /* 其它样式 */
}

这时，子元素在垂直方向上就能够很好地居中了。

水平和垂直居中

如果想要同时实现水平和垂直居中的效果，可以将上述两种方法结合起来使用。

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

.child {
  margin: auto;
  /* 其它样式 */
}

这样，子元素就能够在父元素中同时水平和垂直居中。

总结

flex 布局是 CSS3 中非常有用的布局模式之一，可以帮助我们更好地控制页面中的元素。而对于居中内容而言，flex 布局也提供了非常好的实现方式，使用起来十分方便。我们只需要记得设置好父元素的 display、justify-content 和 align-items 属性，再将子元素的 margin 设置为 auto，就可以实现水平和垂直居中的效果了。