CSS中實現圖片垂直水平居中的效果，是前端開發中比較常見的需求。今天，我們來討論幾種實現方式。

// 方法一：使用絕對定位
.container {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

將容器設置為相對定位，圖片設置為絕對定位，并且把圖片的左上角圖片位置設為容器寬度的50%和高度的50%，然后使用translate將圖片的位置向左和向上移動寬度和高度的1/2，以達到居中效果。

// 方法二：使用flex布局
.container {
display: flex;
align-items: center;
justify-content: center;
}

使用flex布局，將容器的子元素（圖片）垂直和水平居中。align-items屬性將子元素垂直居中，justify-content屬性將子元素水平居中。

// 方法三：使用grid布局
.container {
display: grid;
}
.image {
justify-self: center;
align-self: center;
}

使用grid布局，將容器的子元素（圖片）垂直和水平居中。使用justify-self和align-self屬性將子元素水平和垂直位置設為居中。

// 方法四：使用line-height
.container {
line-height: 500px; //容器高度
text-align: center;
}
.image {
display: inline-block;
vertical-align: middle;
}

使用line-height，將容器的高度設為圖片高度，利用vertical-align屬性，將圖片垂直居中。

以上就是幾種實現圖片垂直水平居中效果的方法，可以根據具體的需求靈活運用。