在網(wǎng)頁(yè)設(shè)計(jì)中，很多時(shí)候需要對(duì)圖片進(jìn)行居中處理。下面就來(lái)介紹一下如何通過(guò)CSS來(lái)實(shí)現(xiàn)圖片左右居中的效果。

首先，將需要居中的圖片包裹在一個(gè)div容器中，設(shè)置該容器的寬度為100%，并將其text-align屬性設(shè)置為center。這樣可以使得div容器水平居中。

<div style="width:100%;text-align:center;">
<img src="example.png" />
</div>

接著，通過(guò)給img元素設(shè)置display屬性為block，使該元素變成塊級(jí)元素，從而實(shí)現(xiàn)水平居中。

<div style="width:100%;text-align:center;">
<img src="example.png" style="display:block;" />
</div>

如果想讓圖片在垂直方向也居中，可以在圖片容器div中設(shè)置display屬性為flex，并將其垂直方向的對(duì)齊方式設(shè)置為居中。

<div style="width:100%;text-align:center;display:flex;align-items:center;">
<img src="example.png" style="display:block;" />
</div>

通過(guò)以上幾步，就可以很輕松地實(shí)現(xiàn)CSS圖片左右居中的效果了。