在網頁開發過程中，我們經常需要使用圖片，但是圖片的大小不同，同時我們也需要讓圖片在不同設備上自適應并垂直居中。這時就需要用到CSS自適應圖片垂直居中的技術。

首先，我們可以使用以下代碼讓圖片自適應網頁寬度：

img{
max-width: 100%;
height: auto;
}

這段代碼中，我們使用了max-width屬性來限制圖片的最大寬度為100%。這樣，無論設備的寬度為多少，圖片都能夠自適應屏幕。

接著，我們需要讓圖片垂直居中?？梢酝ㄟ^以下代碼實現：

.container {
display: flex;
justify-content: center;
align-items: center;
}

這段代碼中，我們給圖片容器添加了display:flex;屬性，并設置了justify-content: center; 和align-items: center;，這樣圖片就會在容器居中顯示。

完整的CSS代碼如下：

.container{
display: flex;
justify-content: center;
align-items: center;
}
img{
max-width: 100%;
height: auto;
}

在使用此技術時，需要注意以下幾點：

• 圖片容器需要設置合適的高度，以便圖片能夠垂直居中。
• 對于低版本的瀏覽器可能不支持flex布局，需要做好兼容性處理。

通過CSS自適應圖片垂直居中的技術，我們能夠很方便地實現圖片的自適應和居中顯示。這不僅提升了網頁的視覺效果，也提高了用戶的使用體驗。