[分享]css中如何将图片上下居中

发布于 2024-11-11 19:30:17

在CSS中，将图片上下居中有多种方法，以下是其中的两种：

方法一：
img {
    display: block; /* 将图片转换为块级元素 */
    margin: auto; /* 自动上下左右居中 */
}

方法二：
img {
    display: block; /* 将图片转换为块级元素 */
    position: relative;
    top: 50%; /* 将图片上边界向下移动50% */
    transform: translateY(-50%); /* 向上移动图片的一半高度 */
}

注：以上两种方法都是将图片上下居中，如果还需要让图片左右居中，则需要在图片外面加一个容器，再使用margin:auto来实现。

css 教程