CSS3在布局中提出了許多新的解決方案。其中，如何垂直居中圖片是很多前端工程師一直在思考的問題。下面我們將介紹如何使用CSS3實現(xiàn)垂直居中圖片的方法。

.vertical-center {
display: flex;
align-items: center; /*垂直對齊中心*/
justify-content: center; /*水平對齊中心*/
}

首先，我們需要使用display:flex來創(chuàng)建水平和垂直居中的容器。然后，我們使用align-items和justify-content屬性來控制圖片在容器中的位置。

接下來，我們將"example.jpg"文件垂直居中至div容器中。

當(dāng)然，這種方法只適用于支持CSS3的瀏覽器，而且我們還需要使用flexbox的其他功能創(chuàng)建垂直居中文本的容器。但是，一旦我們掌握了flexbox布局，并且清楚的知道如何使用它布局，我們就很容易地實現(xiàn)我們想要的樣式效果。