图片在div里水平居中是非常简单的，但是在垂直居中方面就不是那么容易了，青岛星网下面跟大家分享：img图片在div里垂直居中的最佳解决方案，使用Flexbox来垂直居中图片。
HTML代码部分
CSS代码部分.qdxwimg {
display: flex;
justify-content: center;
align-items: center; height:300px; background:#00CC99;
}
.qdxwimg img {height: auto; }
运行结果
flexbox也许是最简单的解决图片垂直居中的方法，但是由于一些旧语法和它缺乏对较早版本的IE浏览器的支持(可以使用display: table-cell 来解决IE问题)，我们需要编写更多的代码，完整代码如下：.center {
background: hsl(240, 100%, 97%);
display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */
display: -moz-box; /* OLD: Firefox (can be buggy) */
display: -ms-flexbox; /* OLD: IE 10 */
display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */
display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
使用table-cell来居中元素的方法
使用 display: table-cell，而不是实际的表格标签。它允许在水平和垂直两个方向上居中。使用这种方法通常需要添加和操纵一个外围包裹元素。这个元素可以是任何元素
HTML代码部分
CSS代码部分.center-aligned {
display: table;
background: hsl(120, 100%, 97%);
width: 100%;
}
.center-core {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center-core img { width: 33%; height: auto; }
青岛星网提醒：width: 100%是必须的，它能阻止div收缩。为了垂直居中外部容器需要设置一些高度。如果想在body中垂直居中，就需要设置body和html元素的高度。该技术可以在所有的浏览器中使用，包括IE8。
