CSS中让图片上下居中有多种方法,下面将介绍一些常用的方法。
//方法一:使用Flexbox布局
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container img {
max-width: 100%;
max-height: 100%;
}
//方法二:使用绝对定位和负margin
.container {
position: relative;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//方法三:使用line-height属性
.container {
height: 200px;
line-height: 200px;
text-align: center;
}
.container img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
} 以上三种方法都可以让图片上下居中,选择哪一种方法主要取决于具体的需求和布局。