CSS
关于CSS实现内容居中的方式有很多种，在这里整理了8种实现内容居中的方式，希望这些方法对学习和使用CSS进行开发有帮助。

1、Flex

可能是当今最流行和最简单的居中方式，可以放心地承认，当可以使用 text-align: center 代替时，使用它来对齐段落。

  1. .flexbox-row {
  2.   display: flex;
  3.   flex-direction: row; /* default value */
  4.   justify-content: center; /* x-axis */
  5.   align-items: center; /* y-axis */
  6. }

如果不知道自己在做什么，Flexbox 可能会有些混乱。基本上 justify-content 跨越 x 轴，align-items 跨越 y 轴。如果将 flex-direction 设置为 column，则轴将反转。

  1. .flexbox-col {
  2.   display: flex;
  3.   flex-direction: column;
  4.   justify-content: center; /* y-axis */
  5.   align-items: center; /* x-axis */
  6. }

这不是一个 flexbox 的文章，所以，在这里不详细介绍flexbox。

2、grid

这个也是非常实用的方法。

  1. .grid {
  2.   display: grid;
  3.   place-items: center;
  4. }

3、Flex/Grid + Margin auto

  1. .margins {
  2.   display: flex; /* or grid */
  3. }
  5. .margins p {
  6.   margin: auto;  
  7. }

4、Text align

是的，这真的很容易。

  1. p {
  2.   text-align: center;
  3. }

5、Padding

如果没有固定的高度并且想要垂直居中，这可能是最简单的方法。

  1. p {
  2.   padding: 80px 0;
  3. }

6、Text align + Padding

这个方法的前提是，没有设置固定高度，在这种场景下，使用这种方法也是非常实用简单的。

  1. p {
  2.   text-align: center;
  3.   padding: 16px 0;
  4. }

7、Absolute

这个方法也是非常实用的。

  1. .box {
  2.   position: relative;
  3. }
  5. .box p {
  6.   position: absolute;
  7.   top: 50%;
  8.   left: 50%;
  9.   transform: translate(-50%, -50%);
  10. }

8、table

这个table虽然有点过时了，但是在一些表格实现文字内容居中的时候，还是非常实用的。

  1. .table {
  2.   display: table;
  3. }
  5. .table p {
  6.   display: table-cell;
  7.   text-align: center; /* x-axis */
  8.   vertical-align: middle; /* y-axis */
  9. }