CSS中實(shí)現(xiàn)圖片中上下居中的效果，可以使用以下兩種方法：

方法一：
HTML結(jié)構(gòu)：
<div class="container">
<img src="example.jpg" alt="圖片">
</div>
CSS樣式：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /*設(shè)置容器高度*/
}
.container img {
max-height: 100%;
max-width: 100%;
}
/*注：以上代碼需要容器設(shè)置高度*/
方法二：
HTML結(jié)構(gòu)：
<div class="container">
<div class="content">
<img src="example.jpg" alt="圖片">
</div>
</div>
CSS樣式：
.container {
position: relative;
height: 200px; /*設(shè)置容器高度*/
}
.container .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .content img {
max-height: 100%;
max-width: 100%;
}
/*注：以上代碼需要容器設(shè)置高度*/