CSS3 implementation of the picture in the container medium scale and horizontal vertical center

In this paper, we will introduce an instance method of using pure CSS3 to realize the medium scale and horizontal vertical display of a picture in a specified container.

See implementation Code First

<!html>


The implementation effect is as follows:


If you change the size of the container. Like what:

Change the section's Width,height property to

width:200px;
height:400px;

Let's look at the effect again:




CSS3 Achieve Horizontal Vertical Center

Horizontal vertical center of the production we have encountered, the horizontal center method to deal with, but the vertical center of words or let a lot of people headache, I also met a lot of friends to ask how to make the element horizontal vertical center. We've also discussed how to get pictures, single-line text, and multi-line text to be centered horizontally vertically across various browsers.
Using a pure CSS3 real box method to achieve horizontal vertical center, now the implementation of the code fragment posted to share with you:

Htmlmarkup

<divclass= "center" >

</div>
<divclass=" center ">
<divclass=" Text "> I'm on a line of text </div>
</  div>
<divclass= "center" >
<divclass= "text" >
I'm a multiline text <br/>
I'm a multiline text.
</div>
</div>

Csscode

. center{
width:300px;
height:200px;
padding:10px; 
border:1px solid #ccc;
margin:20px Auto;
Display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
Display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;
Display:-o-box;
-o-box-orient:horizontal;
-o-box-pack:center;
-o-box-align:center;
Display:-ms-box;
-ms-box-orient:horizontal;
-ms-box-pack:center;
-ms-box-align:center;
Display:box;
Box-orient:horizontal;
Box-pack:center;
Box-align:center;
} 
. Centerimg,
text{
border:1px solid #dedede;
padding:2px;
}

Key code to achieve horizontal vertical centering:

Display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
Display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;
Display:-o-box;
-o-box-orient:horizontal;
-o-box-pack:center;
-o-box-align:center;
Display:-ms-box;
-ms-box-orient:horizontal;
-ms-box-pack:center;
-ms-box-align:center;
Display:box;
box-orient:horizontal;
Box-pack:center;
Box-align:center;

Because Flexbox is a new attribute of CSS3, the browser currently supported is only: ie10+,firefox2+,chrome4+,safari3.1+.