在網頁設計中，圖片是不可或缺的元素。而當圖片的尺寸比父容器小，或父容器的寬度和高度不確定時，圖片如何居中顯示就成了一個問題。對於這個問題，我們可以透過 CSS 的 flex 佈局和 position 屬性來進行解決。
一、使用 flex 佈局
Flex 佈局是 CSS3 引入的一種新的佈局方式，它能夠靈活地控制容器的佈局方式，在父容器中居中子元素非常容易。
1.使用justify-content和align-items屬性
我們可以使用 flex 佈局中的 justify-content 和 align-items 屬性來實現圖片的水平和垂直居中。其中 justify-content 屬性可以控制子元素在主軸方向上的佈局，align-items 屬性則可以控制子元素在交叉軸方向上的佈局。
首先，我們需要將圖片的父容器設定為 display:flex，並且設定 align-items 和 justify-content 為 center。
<div class="parent">
<img src="your-image.jpg">
</div>
.parent {
display: flex;
justify-content: center;
align-items: center;
}這樣，圖片就水平和垂直居中了。
2.使用flex-direction和align-self屬性
我們也可以使用 flex 佈局中的 flex-direction 和 align-self 屬性來實現圖片的居中。 flex-direction 屬性可以改變主軸的方向，而 align-self 屬性可以控制子元素在交叉軸方向上的佈局。
將圖片的父容器設定為 display:flex，並且設定 flex-direction 為 column。
<div class="parent">
<img src="your-image.jpg">
</div>
.parent {
display: flex;
flex-direction: column;
}接下來，我們需要將圖片的 align-self 屬性設為 center 即可實現圖片的垂直居中。
img {
align-self: center;
}二、使用 position 屬性
除了使用 flex 佈局外，我們也可以使用 position 屬性來實現圖片的居中。使用 position 屬性的方法會有些不同。
1.使用絕對定位
我們可以將圖片設定為絕對定位，然後使用 left 和 top 屬性來控制圖片在父容器中的位置。將父容器的 position 設為 relative，這樣圖片就可以相對於父容器進行定位。
<div class="parent">
<img src="your-image.jpg">
</div>
.parent {
position: relative;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}這樣，圖片就水平和垂直居中了。
2.使用負邊距
我們也可以使用負邊距來實現圖片的居中。這種方法是在父容器中加入額外的元素來實現的。將父容器設定為 position:relative，並且新增一個空元素，在空元素中放置圖片。
<div class="parent">
<div class="placeholder"></div>
<img src="your-image.jpg">
</div>
.parent {
position: relative;
}
.placeholder {
height: 100%;
margin-right: -100%;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}這樣，圖片也可以水平和垂直居中。
要點總結
在進行圖片居中時，我們可以使用 flex 佈局和 position 屬性來實現。在使用 flex 版面時，我們可以使用 justify-content 和 align-items 屬性，也可以使用 flex-direction 和 align-self 屬性。在使用 position 屬性時，我們可以將圖片設定為絕對定位，也可以使用負邊距來實現。
整體來說，使用 flex 佈局更加靈活和簡單，但需要使用 CSS3，而使用 position 屬性則更相容於舊版瀏覽器。在實際應用中，我們可以根據情況來選擇使用哪種方法來實現圖片的居中顯示。
以上是css如何讓圖片居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
