CSS設置img居中顯示 在編寫網頁時，經常需要在頁面中插入圖片。但是有時候圖片的大小和頁面的布局并不完全匹配，導致圖片無法很好地展示在頁面中。這時候就需要使用CSS來設置圖片的居中顯示。 在CSS中，有多種方式可以設置圖片的居中顯示，下面介紹其中幾種常用的方法。 1. 使用text-align屬性 當圖片作為塊級元素時，可以使用text-align屬性來設置圖片的水平居中顯示。在包裹圖片的容器元素上添加如下CSS代碼即可實現：

p {
text-align: center;
}
img {
display: block;
}

其中，將圖片的display屬性設置為block可以使它作為塊級元素進行布局。這樣設置后，圖片就會在父容器里居中顯示。 2. 使用margin屬性 還可以使用margin屬性來實現圖片的居中顯示。將margin的值設置為auto即可自動計算出左右邊距，從而使圖片居中顯示。具體CSS代碼如下：

p {
text-align: center;
}
img {
display: block;
margin: auto;
}

其中，設置了text-align屬性可以使圖片水平居中，同時將margin的值設置為auto則實現了圖片的垂直居中。 3. 使用flexbox布局 flexbox布局是一種強大的布局方式，也可以用來實現圖片的居中顯示。具體CSS代碼如下：

p {
display: flex;
justify-content: center;
align-items: center;
}
img {
display: block;
}

其中，justify-content屬性用來設置項目在主軸上的對齊方式，這里設置為center表示居中顯示。align-items屬性則用來設置項目在交叉軸上的對齊方式，同樣設置為center可以實現圖片的垂直居中。 以上就是實現圖片居中顯示的三種常用方法。當出現圖片和頁面布局不匹配的情況時，可以根據具體情況選擇使用其中一種方法進行解決。