CSS中的圖片在盒子垂直居中固然很重要，而且在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常會(huì)用到。下面介紹一下CSS如何實(shí)現(xiàn)圖片在盒子垂直居中的效果。

.box {
display: flex;
align-items: center;
justify-content: center;
}
.box img {
max-width: 100%;
max-height: 100%;
margin: auto;
}

以上代碼中，我們首先將盒子的display屬性設(shè)置為flex，這樣就可以讓所有的元素都垂直居中。align-items屬性是讓每一行中的元素都垂直居中，justify-content則是讓這些元素在容器中水平居中。

接著，我們給盒子里面的圖片設(shè)置一些樣式。max-width和max-height屬性可以限制圖片的最大寬度和高度，讓其適配容器大小。margin屬性用于將圖片在容器中居中顯示。

通過(guò)以上代碼，我們就可以實(shí)現(xiàn)盒子中圖片的垂直居中效果。