首先附带HTML代码
垂直居中
接着附带box为公共样式
.box{ width: 200px; height: 200px; background: pink;}
第一种方法box1：display: table-cell;
兼容ie8及以上。适用于文字与图片
css代码如下：
.box1{ display: table-cell; vertical-align: middle; text-align: center; }
第二种方法box2：display: flex;
兼容ie10及以上。适用于文字与图片
css代码如下：
.box2{ display: flex; justify-content:center; align-items:Center;}
第三种方法box3：绝对定位和负边距;
兼容ie6及以上。适用于文字与图片
但是需要注意的是，需要设置准备的宽高，并且使用的负边距为宽高的一半
css代码如下：
.box3{ position:relative;}.box3 img{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px; text-align: center; }
第四种方法box4：绝对定位与margin;
兼容ie8及以上。适用于文字与图片
关键在于margin与子绝父相
css代码如下：
.box4{ position: relative;}.box4 img{ width: 50%; height: 50%; background: #000; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
第五种方法box5：绝对定位与transform;
兼容ie9及以上。适用于文字与图片
ie8不支持transform，所以会出现兼容性问题
css代码如下：
.box5{ position:relative;}.box5 img{ width: 50%; height: 50%; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align: center; }
第六种方法box6：伪元素;
兼容ie8及以上。适用于文字与图片
一直对伪元素了解不够深，之后会对做更加透彻的分析，所以并不打算多做解释
css代码如下：
.box7{ text-align:center; }.box7 img{ vertical-align:middle; display:inline-block; }.box7:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle;}
第七种方法box7：弹性盒方法;
不兼容所有ie浏览器
适用于文字与图片。也是我最喜欢的一种方法。但是对ie浏览器并不友好。更推荐在手机端使用
css代码如下：
.box8{ display: flex; text-align: center;}.box8 img{ margin: auto;}
第八种方法box8：display: -webkit-box;;
同样适用于手机端，ie端全部爆炸
css代码如下：
.box9{ display: -webkit-box; -webkit-box-pack:center; -webkit-box-align:center; -webkit-box-orient: vertical; text-align: center} 原文链接：http://www.jiangweishan.com/article/duiqi213124124124.html