在網(wǎng)頁設計中，圖片是起到非常重要的作用。對于一張圖片，它的布局和位置也是至關(guān)重要的。為了讓圖片居中，我們可以利用CSS提供的一些屬性和方法來完成。下面就簡單介紹一下如何設置圖片居中。
首先要指定img標簽的顯示方式，使用display屬性來設置。

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

其中，display:block將圖片設置成塊級元素，因此它會占據(jù)父元素的全部寬度。margin:0 auto既設置了上下外邊距為0，還將左右外邊距設置為自動，從而實現(xiàn)圖片水平居中。當然，需要注意的是，這個方法只適用于父容器的寬度固定的情況。
如果父元素的寬度不固定，還需要使用flex布局來實現(xiàn)垂直居中。

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

其中，將父元素的display設置成flex，再用justify-content:center和align-items:center讓其在水平和垂直方向上都居中。再將img的display設置成block，使其成為塊級元素，從而讓圖片自身寬度自適應。
這樣就可以讓圖片在父容器中水平垂直居中了。
總結(jié)一下，讓圖片居中在CSS中主要考慮以下兩個問題：
1.父容器的寬度是否固定，如果是可以使用margin:0 auto來水平居中；如果不是可以使用flex布局來實現(xiàn)。
2.圖片自身的寬度，通過指定display:block來撐滿整個父容器。
以上就是CSS設置圖片居中的方法，希望可以為大家在網(wǎng)頁設計中提供一些幫助。