CSS3 可以很簡單地實現圖片上下居中的布局效果。這個布局效果在很多設計中都經常使用到，比如網站的 LOGO ，或者一些代表公司品牌的圖片等等。下面我們就來介紹一下如何實現這種布局效果。

img {
display: block;
margin: 0 auto;
vertical-align: middle;
}

上面的代碼就是實現圖片上下居中的關鍵代碼。下面我們針對每一行代碼進行解釋：

1.display: block;：將圖片轉換為塊狀元素，讓它可以對 margin 屬性進行上下對齊的操作。

2.margin: 0 auto;：將圖片的左右 margin 屬性設置為 auto ，讓圖片在父容器中水平居中。

3.vertical-align: middle;：將圖片的垂直對齊方式設置為 middle ，讓它在父容器中垂直居中。

通過上面的三行代碼，我們就可以輕松實現圖片上下居中的布局效果。不過需要注意的是，這種布局效果只適用于單行文字與圖片的情況。如果你想在多行文字的情況下對圖片進行居中的布局，那么就需要通過其他方法來實現。