CSS中實現圖片居中的方式有很多種，本文介紹其中最常用的幾種方式。

使用text-align屬性實現圖片居中

<div style="text-align:center">
<img src="image.jpg" alt="圖片">
</div>

如上代碼所示，我們可以在包裹圖片的容器div中設置text-align屬性為center，讓圖片水平居中。

使用margin屬性實現圖片居中

<div style="
width:500px;
height:500px;
display:flex;
justify-content:center;
align-items:center;
">
<img src="image.jpg" alt="圖片">
</div>

如上代碼所示，我們可以使用flex布局，設置容器的justify-content和align-items屬性為center，同時將圖片設置margin屬性為auto，讓圖片在容器中居中。

使用position屬性實現圖片居中

<div style="position:relative">
<img src="image.jpg" alt="圖片" style="
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
">
</div>

如上代碼所示，我們可以將圖片的位置設置為absolute，同時通過left:50%和top:50%讓圖片在容器中垂直和水平方向都到達了中心點，再利用transform屬性及其translate函數將圖片往上往左移動自身尺寸的一半，最終實現圖片在容器中居中。