本文目錄導(dǎo)讀：

1. 水平居中的圖片
2. 垂直與水平居中的圖片

CSS布局技巧：圖片居中展示

在網(wǎng)頁設(shè)計(jì)中，將圖片居中顯示是一種常見的需求，通過CSS，我們可以輕松地實(shí)現(xiàn)這一目標(biāo)，本文將指導(dǎo)您如何使用CSS將圖片居中展示，并為您詳細(xì)解析相關(guān)技巧。

水平居中的圖片

要實(shí)現(xiàn)圖片的水平居中，我們可以使用CSS的margin屬性或者text-align屬性。

方法1：使用margin屬性

為圖片設(shè)置左右相等的邊距，可以達(dá)到水平居中的效果。

img {
    margin-left: auto;
    margin-right: auto;
}

方法2：使用text-align屬性

將包含圖片的元素的text-align屬性設(shè)置為center，也可以使圖片水平居中。

div {
    text-align: center;
}

然后在該div內(nèi)放置圖片。

垂直與水平居中的圖片

若需要圖片在容器內(nèi)垂直與水平都居中，可以使用CSS的Flexbox布局或者Grid布局。

方法：使用Flexbox布局

為包含圖片的容器設(shè)置Flexbox布局，可以輕松實(shí)現(xiàn)圖片的垂直與水平居中。

.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 設(shè)置容器高度為視窗高度，確保垂直居中效果 */
}

然后將圖片放置在.container類中，這種方法兼容性好，適用于現(xiàn)代瀏覽器。

通過CSS，我們可以輕松地實(shí)現(xiàn)圖片的居中顯示，不同的方法適用于不同的場景，可以根據(jù)實(shí)際需求選擇合適的方法，掌握這些方法，將為您的網(wǎng)頁設(shè)計(jì)帶來更好的用戶體驗(yàn)。