（1）使用inline-block+text-align
<div class="parent">
<div class="child">demo</div>
</div>
???.child { ????????????display:inline-block; ???????} ???????.parent { ????????????text-align:center ???????} ???原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 ???优点：兼容性好，甚至可以兼容ie6、ie7 ???(2)使用table+margin ???????.child { ???????????display:table ???????????margin:0 auto; ???????}原理：先将子框设置为块级表格来显示，再设置子框居中以达到水平居中。缺点：不支持ie6、ie7,将div换成table（3）使用absolute+transform ???.child { ????????????????position:absolute; ????????????????left:50%; ????????????????transform:translateX(-50%) ???????} ???????.parent { ?????????????????position:relative ???????}缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀(4)使用flex+margin ???????.child { ?????????margin:0 auto ???????} ???????.parent { ???????????????display:flex ???????}缺点：低版本浏览器(ie6 ie7 ie8)不支持(5)使用flex+justify-content ???.parent { ???????????????display:flex; ???????????????justify-content:center ???????} ???缺点：低版本浏览器(ie6 ie7 ie8)不支持 ???垂直居中 ???(1)使用table-cell+vertical-align ???????.parent { ???????????????display:table-cell； ???????????????vertical-align:middle ???????} ???(2)使用absolute+transform ???????.child { ?????????position:absolute; ???????????top:50%; ???????????transform:translateY(-50%) ???????} ???????.parent { ???????????????position:relative ???????}缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀 ???(3)使用flex+align-items ???????.parent { ???????????position:flex; ???????????align-items:center; ???????} ???水平垂直居中 ???(1)使用absolute+transform(未知高度) ???.parent { ???????????position:relative; ???????} ???.child { ???????????position:absolute; ???????????left:-50%; ???????????top:-50% ???????????transform:tranplate(-50%,-50%) ???????} ???(1.1)使用absolute+transform(已知高度) ???.parent { ???????????position:relative; ???????} ???.child { ???????????position:absolute; ???????????width:100px; ???????????height:100px; ???????????left:-50%; ???????????top:-50% ?????????margin: -50px 0 0 -50px; ???????} ???????(2)使用inline-block+text-align+table-cell+vertical-align ???????.parent { ???????????text-align:center; ???????????display:table-cell; ???????????vertical-align:middle; ???????} ???????.child { ???????????????display:inline-block; ???????} ???????优点：兼容性较好 ???????(3)使用flex+justify-content+align-items ???????.parent { ???????????display:flex; ???????????justify-content:center; ???????????align-items:center; ???????} ???????缺点：兼容性存在一定问题css中实现水平垂直居中的几种方式
原文地址：http://blog.51cto.com/12885303/2116966