一、水平居中（要求：里外容器宽度都不一定，里面容器宽度自适应内容宽）
-
（1）table + margin
在不受父级属性影响的情况下，只有当 child 不是行内元素的时候，margin 才能生效。
若是 child 宽度已知情况下，可直接用 margin：0 auto； 实现水平居中。
-
优点：不需要设置父级样式；兼容性好，IE8 兼容，将该元素
<div>改成<table>可兼容 IE6/7 -
（2）margin + 父级：flex
-
缺点：flex 兼容性不够好，IE6/7/8 不兼容
-
（3）inline/inline-block + 父级：text-align
-
优点：兼容性很好
-
缺点：后代会继承 text-align：center 的属性
-
（4）absolute + transform
-
优点：居中元素脱离文档流，不会对其他元素造成影响
-
缺点：兼容性不够好，transform 是 CSS3 新增的，需要给不同浏览器加前缀
-
（5）父级：flex + justify-content
-
优点：只需设置父节点样式即可
-
缺点：flex 兼容性不够好，IE6/7/8 不兼容
有浮动（float）属性时的区别：
table + margin、inline/inline-block + 父级：text-align
被包裹的元素不能有浮动（float）属性。否则居中这个属性就会失效。
margin + 父级：flex、absolute + transform、父级：flex + justify-content被包裹的元素有浮动（float）属性，居中也不会受到影响。
二、垂直居中（要求：里外容器高度都不一定，里面容器宽度自适应内容宽）
-
（1）父级：table-cell + verticall-align
该方式是将元素转换成表格样式，再利用表格的样式来进行居中（推荐） - 优点：只需设置父节点样式；兼容性好，IE8 兼容，将结构改成表结构可兼容 IE6/7
.parent{
display: table-cell;
vertical-align: middle;
}
-
（2）absolute + transform
- 优点：居中元素脱离文档流，不会对其他元素造成影响
- 缺点：兼容性不够好，transform 是 CSS3 新增的，需要给不同浏览器加前缀
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
-
（3）父级：flex + align-items
- 优点：只需设置父节点样式即可
- 缺点：flex 和 align-items 兼容性不够好，IE8+ 才兼容
.parent{
display: flex;
align-items: center;
}
！注 以上方法均不受浮动（float）属性影响。
三、水平垂直居中（前三要求：里外容器宽高都不一定，里容器自适应内容宽）
-
（1）inline/inline-block + 父级：text-align + table-cell + vertical-align
- 优点：兼容性好，IE8 兼容；将结构改成表结构，用 inline + zoom:1 替代 inline-block 可兼容 IE6/7
-
（2）absolute + transform
- 优点：居中元素脱离文档流，不会对其他元素造成影响
- 缺点：兼容性不够好，transform 是 CSS3 新增的，需要给不同浏览器加前缀
-
（3）父级：flex + justify-content + align-items
- 优点：只需设置父节点样式即可
- 缺点：flex 和 align-items 兼容性不够好，IE8+ 才兼容
-
（4）其他情况
-
绝对定位 + margin:auto（要求：居中元素有一定的宽高，具体值可不知）
父级：position：relative；
子级：position：absolute，上下左右都是0，margin：auto；
-
绝对定位+margin负值（要求：知道居中元素具体的宽高值）
父级：position：relative；
子级：position：absolute；top：50%；left：50%，margin-top：-（高度/2）px；margin-left：-（宽度/2）px
！注 以上方法均不受浮动（float）属性影响。
