在CSS中，對(duì)于圖片的居中，一般是以圖片的父元素為基礎(chǔ)進(jìn)行布局的。以下是圖片在垂直方向上居中的兩種方法： 1.使用line-height屬性 可以通過(guò)設(shè)置父元素的line-height屬性來(lái)實(shí)現(xiàn)圖片的垂直居中。首先，設(shè)置父元素的line-height屬性為等于它本身高度的值，如下所示：

.parent {
height: 200px;
line-height: 200px;
}

接下來(lái)，將圖片設(shè)置為inline或inline-block元素，并為它設(shè)置一個(gè)垂直對(duì)齊方式：

.child {
display: inline-block;
vertical-align: middle;
}

這樣，圖片就可以在垂直方向上居中了。 2.使用flexbox 另外一種實(shí)現(xiàn)圖片垂直居中的方法是使用flexbox。首先，設(shè)置父元素為flex容器，并為它設(shè)置垂直對(duì)齊方式：

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

然后，在父元素里放置圖片元素即可：

這樣就可以將圖片在垂直方向上居中了。 總結(jié) 以上兩種方法都可以實(shí)現(xiàn)圖片在垂直方向上的居中，具體使用哪一種方法，可以根據(jù)實(shí)際情況進(jìn)行選擇。值得注意的是，第一種方法可能在某些瀏覽器中會(huì)出現(xiàn)一些奇怪的行為，所以在使用時(shí)一定要更加謹(jǐn)慎。