CSS是前端開發(fā)中不可或缺的一部分，而圖片作為網(wǎng)頁中不可或缺的元素，如何將其居中是很多人關(guān)注的問題。下面介紹兩種CSS圖片居中方法。 方法一：使用text-center 對于一張圖片的居中，我們可以使用text-center這個CSS類。text-center將會使元素居中對齊，因此我們可以為圖片所在的盒子容器設(shè)置這個類，從而實(shí)現(xiàn)其居中對齊。 例如，我們可以為如下HTML代碼加入text-center類：

圖片居中實(shí)例：

這樣，圖片將會在其所在的容器p內(nèi)居中對齊，并且保持響應(yīng)式設(shè)計(jì)，因此無論頁面尺寸如何變化，圖片都會居中對齊。 方法二： 使用flex CSS3中增加了一些非常方便的布局功能，其中flex就是一種能夠幫助我們輕松實(shí)現(xiàn)圖片居中的CSS類。通過為圖片所在的父容器設(shè)置為flex，并為其設(shè)置如下CSS樣式，就能夠輕松實(shí)現(xiàn)圖片居中。

.container {
display: flex;
justify-content: center;
align-items: center;
}

然后我們將圖片代碼加入.container容器中，代碼如下：

這樣，圖片將會在其所在的容器中居中對齊，而且無論圖片尺寸或容器尺寸怎樣變化，圖片都將居中對齊。 總結(jié)： 以上介紹了兩種流行的CSS圖片居中方法，其中text-center比較簡單而靈活；而使用flex則相對復(fù)雜，但更加強(qiáng)大和靈活。根據(jù)實(shí)際需要選擇適合自己的方法，實(shí)現(xiàn)頁面的高效布局。