一、水平居中
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%) }