css中怎样设置图片上下居中

CSS中如何设置图片上下居中？

方法一：
img {
    display: block;
    margin: 0 auto;
}
通过display:block属性来使图片转换成块级元素，然后通过margin:0 auto;来让图片水平居中。但是，这种方法只能让图片水平居中，不能让其垂直居中。

方法二：
img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
通过让图片的position属性变成absolute，然后使用top:50%和left:50%属性来让图片定位在页面中间。接着，使用transform:translate(-50%,-50%);来让图片对准中心位置，从而实现垂直居中和水平居中。

需要注意的是，第二种方法需要让图片的祖先元素position属性设置成relative，同时也要为其设置宽和高属性。