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;