图片水平垂直居中于盒子

1.使用定位

父元素 position:relative

子元素:

  position: absolute;      

  top: 0;      

  bottom: 0;      

  left: 0;      

  right: 0;      

  margin: auto;

2.使用transform + position

父元素position:relative

子元素

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);