CSS中實現圖片豎直居中是我們網站布局中經常會遇到的一個問題，這時候我們可以通過一些簡單的CSS技巧來實現。下面我們來詳細了解一下。 首先，我們可以使用position和transform屬性來使圖片居中。具體代碼如下： pre{ display: block; background-color: #f5f5f5; padding: 10px; } p{ font-size: 18px; font-weight: bold; margin-top: 30px; margin-bottom: 10px; } img{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } 如上代碼中，我們使用了position、top、left和transform屬性，其中position屬性設置圖片為絕對定位，top和left屬性設置圖片距離容器頂部和左側的距離。而transform屬性則通過translate函數來實現圖片豎直居中。translateY函數將圖片向上移動50%，使圖片中心在垂直方向上與容器中心重合；translateX函數同樣將圖片向左移動50%，使圖片中心在水平方向上與容器中心重合。 另外，我們還可以通過設置line-height和vertical-align屬性來實現圖片的豎直居中，如下具體代碼： pre{ display: block; background-color: #f5f5f5; padding: 10px; } p{ font-size: 18px; font-weight: bold; margin-top: 30px; margin-bottom: 10px; } span{ display: inline-block; line-height: 100px; vertical-align: middle; } img{ vertical-align: middle; } 這里我們通過給圖片的父元素設置line-height為圖片高度，再將其內部元素設置為垂直居中。而圖片本身則只需要設置vertical-align為middle，即可在父元素中豎直居中。 以上就是兩種實現圖片豎直居中的方法，可以根據實際需求選擇使用。在實際開發中，還可以結合maring和padding屬性來適當調整圖片的位置和寬高。