CSS是一種樣式表語言，也是網頁設計中必不可少的一部分。其中最常用的功能之一就是居中元素。在本篇文章中，我們將學習如何用CSS實現圖片居中。

首先，我們需要先創建一個img元素：

<img src="example.jpg" alt="Example">

這是一個基本的圖片元素。如果我們不對它進行任何處理，它就會默認靠左對齊，而我們需要將其居中。首先，我們可以在外部包裝一個div元素，這樣我們就可以對它進行樣式設置：

<div class="center">
<img src="example.jpg" alt="Example">
</div>

這樣設置，我們在CSS中使用了flex布局，將其想象成為一個彈性盒子，只需要通過在.center樣式中設置justify-content和align-items屬性為center，就可以使其水平垂直居中了。

除了flex布局外，我們也可以使用position屬性，將img元素的position屬性設為absolute，及將其父元素的position屬性設為relative，然后在img元素中設置top和left屬性的值：

<div class="outer">
<img src="example.jpg" alt="Example" class="center">
</div>

這樣設置，我們使用了絕對定位和transform屬性來將圖片居中。top和left屬性設為50%表示圖片左上角與其包裝元素的相對位置為50%（即處于中心位置）。但是僅僅這樣還不能將圖片完全居中，還需要使用transform屬性調整它的位置，translate(-50%, -50%)的作用是向左和向上平移50%的圖片尺寸。

CSS是一個充滿變化的語言，使用它可以實現各種各樣的功能。這里僅僅介紹了兩種居中圖片的方法，它們各有優劣并且還有其他的方法，需要根據不同的情況進行選擇。好在現在有很多的CSS框架和庫可以使用，可以加快我們的開發效率。