css如何讓圖片在div裡居中

CSS 中讓圖片在 div 中居中的方法有：文字對齊：適用於圖片與文字垂直居中。 Flexbox：適用於圖片水平和垂直居中。轉換：適用於固定大小的影像。自動邊距：適用於影像寬度已知的情況。

如何在CSS 中讓圖片在div 中居中

方法一：text-align

<code class="css">div {
  text-align: center;
}

img {
  display: inline-block;
}</code>

此方法適用於希望圖片與文字一起垂直居中的情況。

方法二：flexbox

<code class="css">div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}</code>

flexbox 允許靈活佈局，此方法適用於需要圖片水平和垂直居中的情況。

方法三：transform

<code class="css">div {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

此方法使用絕對定位和 transform，適用於固定大小的圖片。

方法四：margin auto

<code class="css">div {
  text-align: center;
}

img {
  margin: auto;
}</code>

margin: auto 使圖像自動居中，但只能在圖像寬度已知時使用。

以上是css如何讓圖片在div裡居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！