几种居中方式：text-align、margin、flex

在进行网页排版过程中，经常遇到需要将内容居中。居中的方式多种多样，针对不同的内容类型，选择适合的方式将事半功倍。

文本居中

第一种常见方式是将文本居中

p {
  text-align: center;
}

通过margin居中

这种方式适用于display属性是block或者inline-block时适用，因为inline element无法设置文字方向的margin。下面的代码使用了margin属性的shorthand，第一个值0将交叉轴方向margin设为0，第二个值auto将主轴方向margin设置为两侧平分。

div {
  display: block;
  margin: 0 auto;
}

通过flex实现多个对象的居中

有时候我们需要将多个对象同时居中在容器的中央，并相互靠拢，通过flex实现是比较快捷的方式。

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}