CSS 中如何讓圖片垂直居中

在CSS中，讓圖片垂直居中可以通過多種方式實現(xiàn)，一種簡單的方法是使用flexbox布局。

我們需要創(chuàng)建一個包含圖片的容器，在CSS中，我們可以使用以下代碼將圖片垂直居中：

.container {
  display: flex;
  align-items: center;
}

在這個代碼中，display: flex;將容器設(shè)置為flexbox布局，而align-items: center;則可以將容器內(nèi)的項目垂直居中。

我們還可以使用CSS的position屬性來實現(xiàn)圖片垂直居中，具體方法是，將容器的位置設(shè)置為相對定位，然后將圖片的位置設(shè)置為***定位，并調(diào)整其top和bottom屬性為0。

.container {
  position: relative;
}
.container img {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

在這個代碼中，position: relative;將容器設(shè)置為相對定位，position: absolute;將圖片設(shè)置為***定位，而top: 0; bottom: 0;則將圖片的上邊緣和下邊緣分別設(shè)置為容器的上邊緣和下邊緣，從而實現(xiàn)垂直居中。margin: auto;可以使得圖片在水平方向上居中對齊。

兩種方法都可以實現(xiàn)圖片垂直居中，具體使用哪種方法可以根據(jù)實際情況進行選擇。