1. text-align：center；
可以实现其内部元素水平居中，通常用于字体水平居中，初学者也可以用于简单块级居中。这种方法对行内元素 (inline)，行内块 (inline-block)，行内表 (inline-table)，inline-flex元素水平居中都有效。
2.margin：0 auto；
用于设置元素的外边距。margin属性，可以控制元素的外边距大小和位置。margin: 0 auto; 表示将元素的左边外边距设置为0，右边外边距设置为自动（auto），即根据浏览器窗口的宽度自动调整。这样可以确保元素在水平方向上居中显示。
3. flex布局：
将父元素设置为display: flex; justify-content: center; align-items: center;即可使子元素在水平和垂直方向上居中。
display: flex;
justify-content: center;
align-items: center;4. position布局：
通过设置父元素的position为relative，子元素的position为absolute，然后设置top、bottom、left、right为0，再设置margin值为auto，就可以实现居中效果。（该方法适用于子元素需要保持原有比例的情况）
5.grid布局：
将父元素设置为display: grid; justify-items: center; align-items: center;也可以使子元素在水平和垂直方向上居中。
display: grid;
justify-items: center;
align-items: center;6. table-cell和vertical-align实现居中：
这种方法适用于单行文本或单个元素的居中，将父元素设置为display: table-cell; vertical-align: middle;就可以实现居中效果。
7.transform: translate(x%,y%)：
这种方法适用于子元素的大小和位置不固定的情况，通过设置translateX和translateY的值为负的一半宽度和高度，就可以实现居中效果。
8. 使用position和transform: translate(x%,y%)组合实现居中：
这种方法适用于子元素的大小和位置不固定的情况，通过设置父元素的position为relative，子元素的position为absolute，然后设置top、bottom、left、right为0，再设置margin值为auto，最后结合translate来调整偏移量，就可以实现居中效果。
9. line-height实现垂直居中：
这种方法适用于单行文本的居中，将父元素的line-height设置为等于height的值，就可以实现居中效果。