CSS 中，圖片的水平垂直居中是一個經常被用到的技巧。以下是幾種實現方法：

/* 方法一：使用絕對定位 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 方法二：使用 flexbox */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 方法三：使用 grid */
.parent {
display: grid;
place-items: center;
}

以上代碼中，“.parent” 是圖片所在的父元素，“.child” 是圖片本身。下面對每種方法進行詳細解釋：

1. 使用絕對定位

首先，給包含圖片的父元素設置相對定位。接著，在圖片上設置絕對定位，并將圖片的左上角移動到父元素寬高的中心點。這里需要用到 transform 屬性去調整圖片位置。

2. 使用 flexbox

將父元素設置為 flexbox 容器，并使用 justify-content 和 align-items 來使圖片水平和垂直居中。這種方法比較靈活，可以根據實際需求進行細節調整。

3. 使用 grid

將父元素設置為 grid 容器，并使用 place-items 屬性來將圖片居中。這種方法與 flexbox 類似，都是挺方便的，但需要注意的是，IE11 不支持。

以上就是幾種實現圖片水平垂直居中的方法。綜合來看，使用 flexbox 最為常用，既簡單又方便，與響應式布局也更加兼容。如果需要兼容更多的瀏覽器，則可以使用絕對定位這種傳統方法。而如果基于現代瀏覽器，使用 grid 更為方便清晰。