Css居中布局 总结
水平方向居中
1.text-align:center （父元素）+display:inline-block(子元素)
优点：
浏览器兼容性比较好（语法都是css2）
缺点：
Text-align属性具有继承性，导致子级元素文本也是居中布局的
（需要单独再设置子元素）
2.display:table/block + margin:0 auto（子元素）
优点：
只需要对子级元素设置就可以达到效果
缺点：
如果子级元素脱离文档流，导致Margin属性的值失效
脱离文档流的三种方法
浮动，绝对定位，固定定位
3.定位法
子元素
Position:absolute; left:50%;translateX(-50%)
父元素:
Position:relative;
优点：
父级元素是否脱离文档流，不影响子级元素水平居中效果
缺点：
Transfrom属性是css3新增属性，浏览器支持情况不好
垂直居中
1.
Display:table-cell;vertical-align:middle(父元素)
优点：浏览器兼容性好
缺点：vertical-align属性具有继承性，子元素也会垂直居中
优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果
缺点：transform属性是css3新属性，支持性不好
局中布局
优点：支持好
缺点：语义化不好（可以改为Block） 需要在父子元素都设置样式
优点：只需要写子元素
缺点：兼容性不好