探討如何透過CSS讓圖片居中

在網頁設計中，圖片通常是不可或缺的一部分， 而當圖像不符合設計規格或不居中時，可能會破壞整個網站的佈局和美觀度。因此，如何讓圖片居中成為了一個值得注意的問題。 CSS 中提供了多種方法來使圖像水平居中和垂直居中。在這篇文章中，我們將探討如何透過 CSS 讓圖片居中。

一、水平居中

1. margin:auto

#使用margin:auto 是一種簡單且常用的方法，它能將圖片水平置中。這種方法將 margin 屬性的左右值設為 auto（margin:0 auto;），可使元素在其容器中水平居中，適用於單一圖片的情況。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
</div>

.wrapper {
  width: 300px;
  margin: 0 auto;
}

使用margin:auto 實作水平居中，這裡我們將容器wrapper 的左右margin 設定為auto：

如下程式碼：

img {  
  display: block;
  margin: 0 auto;
}

透過設定圖片的margin 為0 auto 實現水平居中。

2. text-align:center

我們可以使用text-align:center; 將圖片和其他內聯元素水平居中，但是要注意這種方法只適用於將圖片放在容器內的情況。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
</div>

.wrapper {
  width: 300px;
  text-align: center;
}

透過設定容器 wrapper 的 text-align 為 center，實作包含在內的圖片水平居中。

3. position:absolute 和left:50%

使用這種屬性，我們將圖片的樣式設定為position:absolute 和left:50% ，使圖片水平居中。接著，我們需要將圖片的左邊距（margin-left）設定為圖片本身寬度的一半（ width/2），這種方法適用於只需水平居中而不關心圖片高度的情況下。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
</div>

img {
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

透過設定圖片的position 為absolute，left:50% 決定圖片所在位置，再根據圖片實際寬度將margin-left 設定為負數，使圖片水平居中。

二、垂直居中

1. line-height

#當圖片的高度與元素的line-height 相等時，我們可以將圖片在容器中垂直居中。這種方法適用於只有單行文字的情況。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
  <p>只有单行文本</p>
</div>

.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

透過將容器的 height 和 line-height 設定為相同的值，使圖片垂直居中。

2. display:flex 和 align-items:center

使用 display:flex 和 align-items:center 能夠讓圖片和其他元素在容器中垂直居中。這種方法適用於一個容器中有多個垂直居中的元素（如兩張圖片）的情況。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
  <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

透過將容器的 display 屬性設為 flex，並使用 align-items:center 和 justify-content:center 屬性，使圖片在容器中水平垂直居中。

3. position:absolute 和 top:50%

透過 position:absolute 和 top:50% 屬性，我們可以將圖片垂直置中。接著，將 margin-top 設定為圖片本身高度的一半即可。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

透過將圖片的 position 設定為 absolute ，position: relative；的 wrapper 容器高度設定為200px。接著透過設定圖片的 top 為 50%，使圖片位於垂直的中心位置，並設定 margin-top 為圖片高度的一半，以實現垂直居中。

三、水平垂直居中

如果我們需要將圖片水平和垂直居中，則可以使用以上的方法的其他組合。

1. position:absolute，top:50% 和left:50%

這種方法是最常用的方法，使用position:absolute，top:50% 和left:50% 屬性可以實現同時水平和垂直居中。這種方法適用於只需居中一張圖片。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

透過將圖片的 position 和 top、left 屬性設定為 50%，實現水平和垂直方向的居中。接著，使用 transform 屬性將圖片向左上移動一半的寬度和高度（即 translate(-50%,-50%)）。

2. 使用display：flex 和justify-content 和align-items

使用display:flex，justify-content 和align-items 屬性，我們可以讓多個圖片同時水平垂直居中。這種方法適用於多個圖片在同一行內，並且需要同時在網頁上居中的情況。

如下程式碼：

<div>
  <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
  <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="探討如何透過CSS讓圖片居中" >
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img {
  margin: 5px;
}

透過將容器的 display 設定為 flex，並使用 justify-content 和 align-items 屬性，實現圖片同時水平和垂直居中。

結論

居中圖片是網頁設計中常用到的技巧之一。當我們一個頁面中有多個圖片需要居中時，我們必須選擇適合的居中方法。使用 margin 、text-align 和 position 屬性可以實現水平居中，使用 line-height 、display 和 position 屬性可以實現垂直居中，同時使用這些屬性組合也可以實現水平垂直居中。因此，在網頁設計中選擇合適的圖片居中方法，可以幫助我們創造出更好的使用者體驗和更好的設計風格。

以上是探討如何透過CSS讓圖片居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！