在Web開發(fā)中，經(jīng)常需要對圖片進(jìn)行居中顯示。這里介紹如何使用CSS實現(xiàn)圖片居中顯示。
首先，在HTML中添加一個標(biāo)簽來插入圖片。例如：

<code><img src="images/pic.jpg" alt="picture"></code>

接著，在CSS中為圖片添加樣式，使其居中顯示。下面是實現(xiàn)居中顯示的CSS代碼：

<code>img {
display: block;  /*將圖片轉(zhuǎn)換為塊元素，以便使用margin屬性*/
margin: 0 auto;  /*設(shè)置左右外邊距為auto，這將使圖片居中顯示*/
}</code>

以上代碼中，使用了display屬性將圖片轉(zhuǎn)換為塊元素，這是因為塊元素具有margin屬性，可以使用margin屬性實現(xiàn)居中顯示。同時，通過設(shè)置margin屬性的左右外邊距為auto，實現(xiàn)了圖片水平居中顯示。
這里提供一種更加通用的居中圖片的方法。它可以用來居中最初大小不確定的圖片，并且還可以使圖片超過屏幕尺寸時可以滾動查看。其代碼如下：

<code>img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}</code>

以上代碼中，除了設(shè)置display和margin屬性，還通過max-width屬性將圖片的最大寬度限制為100%，這可以使圖片縮小以適應(yīng)容器大小，并且根據(jù)容器的大小自動調(diào)整。同時，通過設(shè)置height屬性為auto，可以使圖片按比例縮放，保持其原始寬高比。
總之，通過以上三行CSS代碼，我們可以在任何情況下實現(xiàn)圖片的居中顯示。