<html>
<div class="box"><img></div>
<css>
一/*定位和需要定位的元素的margin减去宽高的一半*/
.box{width:300px;height:300px;background:#000;border:1px solid red;position:relative;}
.box img{width:100px;height:150px;position:absolute;top:50%;left:50%;margin-top:-75px;margin-left:-50px;}
二/*定位和margin：auto*/
.box{width:300px;height:300px;background:#000;border:1px solid red;position:relative;}
.box img{width:100px;height:100px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
三/*绝对定位和transfrom*/
.box{width:300px;height:300px;background:#000;border:1px solid red;position:relative;}
.box img{width:100px;height:100px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
四/*display:table-cell*/
.box{width:300px;height:300px;background:#000;border:1px solid red;display:table-cell;vertical-align:middle;text-align:center;}
.box img{width:100px;height:150px;}
五/*flexbox居中*/
.box{width:300px;height:300px;background:#000;border:1px solid red;display:flex;justify-content:center;align-items:center;}
.box img{width:150px;height:100px;}
