Use the CSS3 telescopic box to vertically center images, while the css3 telescopic vertical center

Use the CSS3 telescopic box to vertically center images, while the css3 telescopic vertical center

There are many ways to use CSS to vertically center images. for mobile devices, you can use CSS3 expansion boxes to vertically center images.

The Code is as follows:

<Div class = "box">  </div>

1. box {4 display: flex;/* the container is a telescopic box */5 align-items: center; /* align the vertical axis to center */6} 7 img {8 width: 100%; 9}

The above is the implementation of the new version of the telescopic box, support Android 4.4 +, if you need to be compatible with Android 4.4-, you need to add an additional expansion box, as shown below:

. Box {display:-webkit-box;/* the container is the old expansion box */-webkit-box-align: center;/* set the alignment mode of the old expansion box */display: flex; /* the container is a telescopic box */align-items: center;/* The alignment on the vertical axis is set to center */} img {width: 100% ;}