[分享]css3垂直中心图片

CSS3提供了许多方法可以实现垂直居中图片，下面介绍两种比较常用的方法。

方法一：使用flexbox布局

.container{
  display:flex;
  align-items:center;
}

img{
  margin:auto;
} 

通过设置容器的display属性为flex，再设置align-items属性为center，图片便可以实现垂直居中。而对于图片的水平居中则可以设置img标签的margin属性为auto。

方法二：使用绝对定位

.container{
  position:relative;
}

img{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
} 

通过将容器的position属性设置为relative，图片则相对于容器的位置进行计算，此时就可以使用绝对定位的方法将图片垂直居中。设置img标签的top属性为50%，left属性也为50%，表示将图片移到容器的中心点位置。而transform属性的translate函数可以将图片的位置往上提一半，让图片垂直居中。