今天我們來聊一下如何在CSS中讓圖片居中顯示。在實際開發中，我們經常會遇到需要對圖片進行居中對齊的情況，本文將著重介紹幾種實現方式。 首先，我們可以使用以下代碼實現水平居中對齊。

img {
margin: 0 auto;
display: block;
}

使用這段代碼，可以讓圖片水平居中對齊。其中，margin的值為“0 auto”，表示在橫向上，左右邊距設置為自動，也就是將圖片放在容器中間。 如果想要實現垂直居中對齊呢？可以使用以下代碼實現：

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

使用這段代碼，可以讓.container容器內的圖片實現垂直居中對齊。其中，display:flex屬性用于設置flex布局，justify-content:center屬性用于水平方向上居中對齊，align-items:center屬性用于垂直方向上居中對齊。 除此之外，我們還可以使用以下代碼實現居中對齊：

img {
position: absolute; 
left: 50%;  /*將圖片位置放在容器中間*/
top: 50%; 
transform: translate(-50%,-50%);  /*通過移動圖片位置實現居中對齊*/
}

使用這種方式，我們將圖片的左上角放在容器中心位置，然后通過transform屬性進行微調，將圖片居中對齊。 綜上所述，通過上述幾種方式，我們可以實現在CSS中讓圖片居中對齊。在實際開發過程中，視具體需求選擇相應的方式，可以讓頁面呈現更加美觀的效果。