在HTML頁面中，使用圖片可以讓頁面變得更豐富。然而，在使用圖片時，我們可能會遇到圖片不居中的問題。這是因為圖片的位置是由瀏覽器自動決定的，而不是由我們手動設定的。在這時，我們可以使用CSS來使圖片居中。本文將介紹CSS怎麼讓圖片居中。
一、使用margin實作圖片居中
使用margin是最常見的讓圖片居中的方法。我們可以透過加入上下左右各自為50%的margin值，再透過負的圖片寬度/高度的一半來實現圖片的居中。
程式碼範例：
HTML:
CSS:
.container { position: relative; } .center-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
二、使用flexbox實作圖片居中
flexbox是一種CSS3佈局，它允許我們透過設定父元素的flex屬性來輕鬆地將子元素居中。例如，以下CSS程式碼可以讓所有的子元素水平垂直居中：
.parent { display: flex; justify-content: center; align-items: center; }
那麼具體到圖片元素的居中，我們只需要將圖片所在的容器設定為flex佈局，並設定align-items和justify -content屬性即可。
程式碼範例:
HTML:
CSS:
.container { display: flex; justify-content: center; align-items: center; }
三、使用grid實作圖片居中
類似flexbox，我們也可以使用CSS網格來將圖片居中。我們將圖片容器作為一個網格容器，並設定其為居中對齊即可。
程式碼範例:
HTML:
CSS:
.container { display: grid; place-items: center; }
總結：
以上就是三種讓圖片居中的方法，我們可以根據實際情況選擇一種方法來實現。使用margin方法最常用，但如果你需要實作其他的佈局，flexbox和grid可能更適合你。當然，在實際開發中也可以結合使用多種方法來達到更好的效果。
以上是css怎麼使圖片居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
