本文详情: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;