css：水平居中、垂直居中、居中

一、水平居中
1、优点：CSS2属性浏览器兼容性好
缺点：text-align具有继承性，会导致子级元素的文本居中显示，需要给每个子级元素设置text-align

.parent{ text-align: center; /* 文本居中 */}
.child{ display: inline-block; /* inline(宽高属性无效) */ }

2、优点：只需要设置子级元素就可以实现居中布局
缺点：如果子级元素脱离文档流，margin属性无效
脱离文档流：float，absolute，fixed
margin 三个值的时候代表：上、左右、下

.child{ display：table/block ; /*div默认block*/
margin: 0 auto; /* 浏览器自动分配，即等分左右外边距*/ }

3、优点：无论父级元素是否脱离文档流，都不影响子级元素居中效果
缺点：transform是CSS3属性，兼容性不好

.parent{ position: relative; }
.child{ position: absolute; left: 50%; transform: translateX(-50%); }

二、垂直居中
1、优点：浏览器兼容性好
缺点：vertical-align具有继承性

.parent{ display: table-cell; /* 设置元素为<td>元素 */
vertical-align: middle; /* 设置文本垂直居中对齐 */ }

2、优点：无论父级元素是否脱离文档流，都不影响子级元素垂直居中效果
缺点：transform是CSS3属性，兼容性不好

.parent{ position: relative; }
.child{ position: absolute; top: 50%; transform: translateY(-50%); }

三、几种居中方案

.parent{ dispalay: table-cell; vertical-align: middle; text-align: center ; }
.child{ display: inline-block ; }

.parent{ dispalay: table-cell; vertical-align: middle; }
.child{ margin: 0 auto ; }

.parent{ position: relative; }
.child{ position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%) }