亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

css 中讓圖片在 div 中居中的方法有：文本對(duì)齊：適用于圖片與文本垂直居中。flexbox：適用于圖片水平和垂直居中。轉(zhuǎn)換：適用于固定大小的圖像。自動(dòng)邊距：適用于圖像寬度已知的情況。

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

方法一：text-align

<code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;div {
  text-align: center;
}

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

登錄后復(fù)制

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

方法二：flexbox

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

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

登錄后復(fù)制

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

方法三：transform

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

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

登錄后復(fù)制

此方法使用絕對(duì)定位和 transform，適用于固定大小的圖像。

方法四：margin auto

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

img {
  margin: auto;
}</code>

登錄后復(fù)制

margin: auto 使圖像自動(dòng)居中，但只能在圖像寬度已知時(shí)使用。