让一个元素水平垂直居中，到底有多少种方案？

水平居中

• 对于行内元素:

1. 给如果父级元素是块级元素，则直接给父级元素设置text-align: center;
2. 如果父级不是块级元素，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

• 对于确定宽度的块级元素：

3. width和margin实现。margin: 0 auto;
4. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%。设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
   • 对于宽度未知的块级元素
5. inline-block实现水平居中方法。该元素display：inline-block，它的父元素设置text-align:center实现水平居中。
6. 绝对定位+transform，translateX可以移动本身元素的50%。

display:absolute;
left:50%;
transform: translate(-50%)

7. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto。
8. flex布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

垂直居中

• 单行的行内元素

1. 利用line-height设置单行行内元素的"行高等于盒子的高"实现居中，这种方法适合纯文字类

• 对于多行的行内元素

2. 使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

• 对于块级元素

3. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%。 设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);（高度未知的情况下用transform，高度已知的情况下二者都可以用）
4. flex方案（高度定不定都可以），只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
5. 弹性布局flex（高度定不定都可以）:父级设置display: flex; 子级设置margin为auto实现自适应居中（可分别实现水平和垂直的居中）
6. 已知高度和宽度的元素，设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;（水平垂直居中）