html / css series - centered picture upside-down

This article details: http://www.zymseo.com/276.html
center the image of the upper and lower common problem in several ways:
images of known size and unknown size, self-understanding

 .main{
     width: 400px;height: 400px;
     border: solid 1px red;
     text-align: center;
 }
<div class="main"><img src="1.png"></div>

In fact, the next picture shows and end states:

Method a: diaplay: table-cell unit table form

 display:table-cell;
 vertical-align:middle;

Method two: flex; align-items: center; justify-content: center box layout elastic

display:flex;
align-items:center;
justify-content:center;

Method three: position plus margin

position: relative;

margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;

Method four: position plus transform

position: relative;

position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

Method five: pure position

position:relative;

position: absolute;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-50px;