CSS居中

基本就是翻译
https://css-tricks.com/centering-css-complete-guide/#center-horizontally

原文是根据需要的居中选项不断展开的，比较方便查看，建议看看原文

水平居中

1. inline或者inline-*类型的
   父级元素text-align: center;

2. 块级元素
   目标元素margin: 0 auto;
   float的元素https://css-tricks.com/float-center/

3. 多个块级元素
   a.inline-block
   父级元素text-align: center;，目标元素display: inline-block;
   b.flex
   父级元素display: flex;justify-content: center;

垂直居中

1. inline或者inline-*类型的
   a.单行
   父级元素上下的padding相等
   b.多行
   i.父级元素上下的padding相等也可以试试，不一定有效
   ii.使用table或者父级元素display: table;目标元素display: table-cell;vertical-align: middle;
   iii.父级元素display: flex;justify-content: center;flex-direction: column;
   iv.使用一个before伪元素进行对齐，我试了一下这种方式好像有问题，建议看原文
2. 块级元素
   a.知道高度
   绝对定位，top: 50%;margin-top: -高度的一半;
   b.不知道高度
   绝对定位，top: 50%;transform: translateY(-50%);
   c.考虑flex
   父级元素display: flex;justify-content: center;flex-direction: column;

水平和垂直居中都要

1. 是否具有固定宽高
   绝对定位，50% / 50%，负margin
2. 未知宽高
   绝对定位，50% / 50%，transform: translate(-50%, -50%);
3. 考虑flex
   display: flex;justify-content: center;align-items: center;