居中布局

水平居中布局

第一种解决方案：
父级元素text-align:center
（text-align是为文本内容设置格式的，对于内联元素和行内块级元素也有效果）
子级元素：display:inline-block

优点：浏览器兼容好
缺点：因为text-align具有继承性，所以子元素中的内容也会居中
【对于子元素内容居中解决方案：在子元素内重新甚至text-align】

第二种解决方案：
子级元素：①display:block/table②margin:0 auto
优点：只需要对子集元素设置就可以实现居中对齐效果
缺点：如果子级元素脱离文档流，那么margin值就无效了
【脱离文档流：浮动和定位】

第三种解决方案
父级元素：position：relative/fixed
子级元素：①position:absolute
②left:50%
③transform：translateX（-50%）
优点：父级元素是否脱离文档流，不影响子级元素水平居中
缺点：因为tansform是css3新增属性，存在兼容问题

垂直居中布局

第一种解决方案：
父级元素：①display：table-cell②vertical-align:middle
（vertical-align是为文本内容设置垂直方向格式的）

优点：浏览器兼容好
缺点：因为vertical-align具有继承性，所以子元素中的内容也会垂直居中

第二种解决方案
父级元素：position：relative/fixed
子级元素：①position:absolute
②top:50%
③transform：translateY（-50%）
优点：父级元素是否脱离文档流，不影响子级元素垂直居中
缺点：因为tansform是css3新增属性，存在兼容问题

水平垂直居中对齐

第一种解决方案
父级元素：position：relative/fixed
子级元素：①position:absolute
②top:50%，left:50%
③transform：translate（-50%,-50%）
优点：父级元素是否脱离文档流，不影响子级元素垂直居中
缺点：因为tansform是css3新增属性，存在兼容问题

第二种解决方案：
父级元素：①display：table-cell②vertical-align:middle
子级元素：①display:block/table②margin:0 auto
【根据语义化子集元素最好设置成block】