css水平垂直居中

1. 把margin设置为auto

• 此方法只能进行水平的居中，且对浮动元素或绝对定位无效
• 此方法是将元素的位置相对与父元素进行水平居中
• 适用于对元素进行定位，对元素内部的元素不起作用

2. 使用text-align：center

• 只对行内元素能够进行水平居中，在IE6、7中，可以对任何元素居中
• 是使元素内部的子元素进行水平居中，对该元素无效

3.使用line-height让单行文字垂直居中

• 把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况
• line-height的具体使用参考：https://blog.csdn.net/qq_41539074/article/details/102609598

4. 使用表格

• 表格默认的就会对它里面的内容进行垂直居中
• 具体使用查看https://www.html.cn/archives/6308

5.使用绝对定位来进行居中

• 父元素设置position: relative;,子元素设置position：absolute; margin: auto; top:0;bottom: 0; left: 0; right:0;无需知道被垂直居中的元素的宽和高,单个元素的垂直居中
• 父元素设置position：relative;子元素设置 poaition:absoulte; top:50%;left:50%;margin-top:-1/2height;margin-left:-1/2width;` 此方法只适用于已经知道宽度和高度的元素，单个元素的垂直居中

**7.使用line-block结合::after **

• 参考https://www.jianshu.com/p/b45f4d8ca372

8. 使用flex布局

• display：flex；justify-conten:center;align-items:center;可实现单行子元素在父元素中水平垂直居中排列,多个元素

9.行内元素的水平居中

• 把行内元素包裹在块级父层元素中，在父层元素设置text-align: center;
• felx布局

10.块级元素水平居中

• 将其自身margin设置为 margin： 0 auto;，实现单个元素的水平居中
• 将子元素设置为 display:inline-block;，给其父元素设置text-align: center; 可实现多个元素的水平 居中，有副作用，慎用
• 使用flex布局
• position、float、具体使用参考：https://blog.csdn.net/qq_41539074/article/details/95363801

参考资料：https://www.cnblogs.com/2050/p/3392803.html