本文目錄導讀：

1. 文本中的圖片居中
2. 塊級元素的水平居中
3. 垂直居中的圖片

CSS布局技巧：圖片居中的多種方法

文本中的圖片居中

在HTML中，我們經(jīng)常需要將圖片放置在文本中間，以提升頁面的視覺效果，通過CSS，可以輕松實現(xiàn)這一目標，對于行內(nèi)元素，我們可以使用text-align: center;來將圖片居中。

div {
  text-align: center;
}

將上述CSS樣式應用于包含圖片的<div>元素，即可實現(xiàn)圖片的水平居中。

塊級元素的水平居中

對于塊級元素（如<div>），若需要實現(xiàn)圖片的水平居中，則需要使用不同的CSS技巧，一種常見的方法是使用margin: auto;結(jié)合指定寬度。

div {
  width: 50%; /* 或其他固定寬度值 */
  margin: auto; /* 左右margin相等，實現(xiàn)水平居中 */
}

此方法可使塊級元素內(nèi)的圖片水平居中。

垂直居中的圖片

垂直居中的難度相對較大，但同樣可以通過CSS實現(xiàn)，一種常見的方法是使用flexbox布局。

.container {
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 垂直居中對齊 */
  justify-content: center; /* 水平居中對齊 */
  height: 100vh; /* 設置容器高度為視窗高度，以便圖片在整個頁面中垂直居中 */
}

這種方法可以使圖片在容器中垂直居中，需要注意的是，這種方法要求容器的高度被明確設置，如果容器的高度未知或自適應，可能需要其他方法來實現(xiàn)垂直居中。

通過CSS，我們可以輕松實現(xiàn)圖片的居中布局，無論是水平居中還是垂直居中，都有多種方法可供選擇，在實際應用中，可以根據(jù)具體需求和場景選擇***適合的方法。