android图片垂直居中,img图片在div里垂直居中的最佳解决方案

图片在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。