html/css系列-图片上下居中

本文详情:http://www.zymseo.com/276.html
图片上下居中的问题经常使用的几种方法:
图片已知大小和未知大小，自行理解

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

下图为其实状态和结束状态：

方法一：diaplay:table-cell 单元表格的形式

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

方法二：flex;align-items: center;justify-content: center 弹性盒子布局

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

方法三：position加margin

position: relative;

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

方法四：position加 transform

position: relative;

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

方法五：纯position

position:relative;

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