CSS9种水平居中方式

1.通过margin:0 auto实现CSS水平居中*

　　.father{ 必须指定宽高 }

　　.son{ 

　　margin:0 auto;

　　text-align:center; }

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

　　.father{ 

　　display:flex;

　　flex-driection:column; }

　　.son{ 

　　align-self:center; }

3.通过display:table-cell实现CSS水平居中*

　　.father{ display:table-cell; }

　　.son{ margin-left:150px; }

　　margin-left根据实际父元素宽度和子元素自身宽度进行调整

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

　　.father{ position:absolute; }

　　.son{ margin-left:150px; }

　　margin-left根据实际父元素宽度和子元素自身宽度进行调整

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

　　子元素宽度不确定情况下也能实现CSS水平居中

　　.son{ 

　　width:fit-content;

　　margin:0 auto;

　　text-align:center; }

6.通过display:inline-block实现CSS水平居中

　　.father{ display:inline-block; }

　　.son{ 

　　margin:0 auto;

　　text-align:center; }

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

　　.father{ position:relative; }

　　.son{ 

　　float:left;

　　margin-left:150px; }

　　margin-left根据实际父元素宽度和子元素自身宽度进行调整

8.通过隐藏节点、float的方式实现CSS水平居中

　　.hide{

　　width为son的一半

　　float:left;}

　　.son{ float:left; }

9.通过transform实现CSS水平居中（有浏览器兼容问题）

　　.son{ 

　　width:50%;

　　height:50%;

　　text-align:center;

　　position:absolute;

　　left:50%;

　　transform:translate(-25%,-25%); }

————学习记录