圖片居中的CSS代碼怎么寫

在CSS中，我們可以使用多種方法將圖片居中，以下是一些常見的圖片居中CSS代碼示例：

1、使用flex布局

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

2、使用grid布局

.container {
  display: grid;
  justify-content: center;
  align-items: center;
}

3、使用position屬性

.container {
  position: relative;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4、使用text-align屬性

.container {
  text-align: center;
}

需要注意的是，這些方法的使用取決于你的具體需求和布局，在選擇方法時(shí)，請(qǐng)考慮你的HTML結(jié)構(gòu)、其他樣式以及瀏覽器兼容性等因素，為了確保圖片能夠正確居中，還需要確保圖片的寬度和高度設(shè)置得當(dāng)，避免出現(xiàn)拉伸或壓縮的情況。