css⽔平居中的⽅法
⽅法1
通过margin:0 auto ; text-align:center；实现css⽔平居中
⽅法2
通过display:flex（弹性布局）实现css⽔平居中
⽗元素：
display:flex;
flex-direction:column; //从上到下垂直排列
⽽⼦元素：
align-self:center; //flex⼦项的对齐⽅式
⽅法3
通过display:table-cell和margin-left实现CSS⽔平居中。
css实现三列布局对于⽗元素和⼦元素的宽度都确定的情况，适合通过display:table-cell（表格单元格）和margin-left实现CSS⽔平居中。
使⽤时，⽗元素display:table-cell，⼦元素给剩余宽度⼀半的margin-left。
⽅法4
通过position:absolute实现CSS⽔平居中。
这种⽅法跟上⼀个⽅法适⽤场景⼀样，也是适⽤于⽗元素和⼦元素的宽度都确定的情况。
使⽤时，⽗元素position:absolute，⼦元素给剩余宽度⼀半的margin-left。
⽅法5
通过width:fit-content实现CSS⽔平居中。
这种⽅法可以确保⼦元素宽度不确定的情况下，也能实现CSS⽔平居中。
需要注意的是，需要配合“margin: 0 auto; text-align: center”使⽤。
⽅法6
通过display:inline-block（⾏内块元素）和text-align:center实现CSS⽔平居中。
display:inline-block能改⽗元素内的⼦元素的表达样式，同样需要配合“margin: 0 auto; text-align: center”使⽤。
⽅法7
给⽗元素样式position:relative，给⼦元素float:left和margin-left就可以实现CSS⽔平居中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。