CSS居中的九种方法

本文多处错误，不要参考，改日完善

 

 

1. 通过margin: 0 auto;       text-align: center    实现CSS水平居中（父元素必须指定width和height）
2. 通过display:flex实现CSS水平居中 (父元素display:flex;flex-direction:column;而子元素align-self:center）
3. 通过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水平居中（给父元素样式position:relative，给子元素float:left和margin-left就可以实现CSS水平居中。）
8. 通过隐藏节点+float的方法实现CSS水平居中（通过增加一个隐藏节点，然后使其float:left，这样子元素就会被隐藏节点推着水平居中。这种增加隐藏节点方法也适用于CSS垂直居中，原理一样，但是不用float）
9. 通过transform实现CSS水平居中（这种方法是最不推荐的方法，因为transform属性在各个浏览器中的表现行为不一致，所以会出现一些兼容性的问题，只有当已知用户浏览器时才推荐使用）

 

    CSS水平居中使用第1、3、4种方法的浏览器兼容性最好，其它方法或多或少都存在一些浏览器兼容性上的不足