在網(wǎng)頁開發(fā)中，我們經(jīng)常需要設(shè)置圖片垂直居中來優(yōu)化我們的頁面設(shè)計。HTML5提供了兩種不同的方法來實現(xiàn)圖片垂直居中，分別是使用CSS和使用HTML標(biāo)簽屬性。

使用CSS實現(xiàn)圖片垂直居中

/* 使用display:flex和align-items:center實現(xiàn)圖片垂直居中 */
.container {
display: flex;
align-items: center; 
}
.container img {
width: 100%;
height: auto;
}

使用CSS的方式是將需要居中的圖片包含在一個容器中，然后設(shè)置容器為flex布局，并使用align-items:center屬性將圖片垂直居中。需要注意的是，圖片的寬度最好設(shè)置為100%。

使用HTML標(biāo)簽屬性實現(xiàn)圖片垂直居中

/* 使用img標(biāo)簽屬性align設(shè)置圖片居中 */

使用HTML標(biāo)簽屬性的方式比較簡單，只需要在img標(biāo)簽中添加屬性align="middle"即可將圖片垂直居中。但是需要注意的是，該屬性已經(jīng)被標(biāo)注為廢棄，不推薦使用。

無論是使用CSS還是HTML標(biāo)簽屬性，都能實現(xiàn)圖片垂直居中。推薦使用CSS的方式，因為在實現(xiàn)居中時它比較靈活。