面试中经常被问到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;}