居中的几种方法

margin: 0 auto; text-align: center  居中 

当父元素设置了宽高 可用  margin: 0 auto; text-align: center  居中

---

通过display:flex实现CSS水平居中

通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;

---

通过display:table-cell和margin-left实现CSS水平居中

对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。

---

通过position:absolute实现CSS水平居中

这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。

---

通过width:fit-content实现CSS水平居中

这种方法可以确保子元素宽度不确定的情况下，也能实现CSS水平居中。父元素宽度确定 给子元素加上 width:fit-content; margin:0 auto;  text-align:center;

---

通过display:inline-block和text-align:center实现CSS水平居中

父元素添加 display：inline-block  子元素添加 margin: 0 auto; text-align: center

---

通过position:relative、float:left和margin-left实现CSS水平居中

给父元素样式position:relative，给子元素float:left和margin-left就可以实现CSS水平居中。

---