CSS 圖片怎么居中？ 圖片是網頁中不可缺少的元素之一，在網站設計中起到了很重要的作用。有時候，圖片需要向文本一樣居中對齊。那么，如何使用 CSS 來實現圖片的居中對齊呢？本文將介紹兩種方法，一種是使用 margin 屬性，另一種是使用 flex 布局。 方法一：使用 margin 屬性 如果想要讓圖片在容器中水平和垂直方向都居中，可以使用 margin 屬性。先將圖片的定位方式指定為絕對定位（position: absolute），然后設置左右和上下各為 0，并設置 margin 屬性為 auto，如下所示：

img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

代碼解析：將圖片的定位方式聲明為絕對定位，然后將左右和上下都設置為 0，這樣圖片就會緊貼著容器的四周，接著將 margin 屬性設置為 auto，它會自動把圖片在水平和垂直方向分別居中，從而實現了圖片的居中對齊。 方法二：使用 flex 布局 除了使用 margin 屬性，我們還可以使用 flex 布局來實現圖片的居中對齊。在容器上設置 display: flex，然后使用 justify-content 和 align-items 屬性來讓圖片在水平和垂直方向上都居中,如下所示：

.container {
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}

代碼解析：將容器的 display 屬性設置為 flex，然后使用 justify-content 和 align-items 屬性設置為 center，它們會分別控制圖片在水平和垂直方向上的對齊方式。同時，對圖片設置 max-width 和 max-height 屬性使其保持比例不變。 總結： 以上兩種方法都能實現圖片的居中對齊，不同之處在于一個使用 margin 屬性，一個使用 flex 布局。使用 margin 屬性的方法簡單易懂，但只適用于居中一個元素；使用 flex 布局的方法，適用于居中多個元素，且更加靈活。所以根據實際需要選擇合適的方法即可。