css中img居中怎麼設定

在 CSS 中，可透過以下方法讓圖片居中：使用文字對齊屬性：將圖片設定為區塊元素，並設定自動左右外邊距。使用 flexbox 佈局：將圖像放入 flexbox 容器，並設定水平和垂直居中屬性。使用網格佈局：將影像放入網格容器，並設定同時水平和垂直居中屬性。使用絕對定位：將影像從正常流中移除，設定水平居中位置並透過變換使其垂直居中。

CSS 中如何讓圖像居中

在CSS 中，讓圖像居中可以使用多種方法：

使用文字對齊屬性

<code class="css">img {
  display: block;
  margin: 0 auto;
}</code>

• display: block 讓圖像成為一個區塊元素。
• margin: 0 auto 自動設定影像的左右外邊距，使其在父元素中水平居中。

使用 flexbox 佈局

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

img {
  width: 100px;
  height: 100px;
}</code>

• #建立一個 flexbox 容器（.container）。
• justify-content: center 將子元素（映像）在水平方向上置中。
• align-items: center 將子元素放在垂直方向上置中。

使用網格佈局

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  width: 100px;
  height: 100px;
}</code>

• 建立一個網格容器（.container）。
• place-items: center 將子元素（影像）同時在水平和垂直方向上置中。

使用絕對定位

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

• 使用絕對定位將影像從其正常流中移除。
• left: 50% 將圖像水平居中，但它將相對於其父元素的左邊界居中。
• transform: translate(-50%, -50%) 將圖像向左和向上移動其自身寬高的 50%，從而在父元素中居中。

以上是css中img居中怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！