黑科技 · 图片居中的四种常用方法

一般情况下，图片外面会有一个div将其包起来，为了美观，会将图片进行居中处理，以下有四种常用的图片方法

1. 行高等于高
   在知道父元素高度的情况下，将父元素行高等于高，等将图片设置为行内块，最后将图片水平居中

.warp{
  width: 500px;
  height: 500px;
  line-height: 500px;
  font-size: 0;
}
.warp>img{
  width: 100%;
  display: inline-block;  
  vertical-align: middle;
}

父元素的文字font-size必须等于0，因为在文字不等于0的情况下会有空白节点的存在，空白节点可以当做是文字，强行将图片和文字顶下去，因此加font-size: 0;来消除空白节点。

2. 高度不确定的情况下，设display:table-cell
   将父元素设置为display:table-cell;，强行将父元素转换成表格，使其有表格的特性，然后将父元素设置为垂直居中

.warp{
  width: 500px;
  height: 500px;
  display: table-cell;
  vertical-align: middle;
}
.warp>img{
  width: 100%;
}

这种情况下，由于表格属性比较傲娇，父元素warp是不屑于和其他元素同行的，会独占一行，只有相邻元素同为display:table-cell;才会同行，因此在相邻元素属性不为表格的情况下必须进行处理，比如浮动。
此外，设置了display:table-cell;的warp使用overflow: hidden;是无效的

3. 相对绝对定位居中法（绝对定位+变换）
   相当常用的一种方法，将父元素设置为相对定位，图片设为绝对定位，图片的外边距设为自适应，随后基于容器往下移动50%，再相对自身往上移动50%，以达到图片居中的效果

.warp{
  width: 500px;
  height: 500px;
  position: relative;
}
.warp>img{
  position:absolute;
  margin: auto;
  //基于容器移动50%
  top: 50%;
 //基于图片本身移动50%
  transform: translateY(-50%);
}

top属性是基于父元素移动，而transform: translateY(-50%);则是基于自身Y轴向上移动50%，这种方法可以在不知道父元素的高度的情况下使用，但是如果使用overflow: hidden;将可能使得图片被裁剪

4. 弹性盒子
   使用弹性盒子将图片进行居中

.warp{
  display: flex;
  width: 500px;
  height: 500px;  
  align-items: center;
  justify-content: center;
}
.warp>img{
  width: 80%;
}