本文详情:
图片上下居中的问题常用的几种方法:图片已知大小和未知大小，自行理解.main{ width: 400px;height: 400px; border: solid 1px red; text-align: center; } 
下图为其实状态和结束状态：
方法一：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;