在網頁設計中，圖片作為頁面的重要組成部分，往往需要設定為居中顯示。本篇文章將介紹如何透過CSS讓圖片居中顯示。
第一種方法：使用text-align屬性
text-align屬性是指定一個元素內文字內容的水平對齊方式，一般用於區塊級元素，但也可用於行內元素。當將text-align屬性設為center時，該元素內的文字內容會水平居中對齊。而當文字內容為圖片時，此時圖片也會隨之居中顯示。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<img src="example.jpg" alt="example image">
</div>
</body>
</html>如上程式碼所示，透過將圖片嵌套於一個具有text-align:center屬性的div元素中，即可實現圖片居中顯示。
第二種方法：使用margin屬性
margin屬性用於設定元素的外邊距，將元素向外推離其它元素或邊界。當使用margin屬性時，設定其左右邊距均為auto，則元素內容將自動居中對齊。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<img src="example.jpg" alt="example image" class="center">
</body>
</html>如上程式碼所示，透過將圖片新增class屬性，然後再CSS樣式中將該class元素的marginLeft和marginRight都設為auto，同時將display屬性設為block，即可實現圖片居中顯示。
第三種方法：使用flex佈局
flex佈局是一種彈性盒子模型，允許更好地控制伸縮容器中的項目。 flexbox透過屬性align-items、justify-content和align-self來控制子元素在容器中的對齊方式。當flex的屬性align-items和justify-content都設定為center時，容器內的項目會自動居中對齊。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="example image">
</div>
</body>
</html>如上程式碼所示，透過在一個包含圖片的父容器中新增flex佈局屬性，即可讓圖片自動居中對齊。
綜上所述，以上三種方法都能夠輕鬆實現圖片居中顯示。可以根據具體情況選擇合適的方法，從而達到最佳的顯示效果。
以上是圖片怎麼居中css的詳細內容。更多資訊請關注PHP中文網其他相關文章！
