在 CSS 中居中影象
在本文中，我們將介紹三種藉助 CSS 使 HTML 中的影象居中的方法。
在 CSS 中使用 display 和 margin 屬性居中影象
我們可以一起使用 display 和 margin CSS 屬性來使影象居中。影象的 display 屬性最初是 inline。因此，我們可以在一行中新增多個影象。例如，如果我們編寫以下程式碼，我們可以看到連續的兩個影象。
<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" />
因此，我們必須將影象的 display 屬性更改為 block，以便僅將一張影象放置在一行中。然後，我們可以給影象 margin 的 0px auto 使其居中。影象的頂部和底部將有一個 0px 邊距。第一個值可以是任何數字，但第二個值必須是 auto。auto 為影象提供了一個邊距，將其置於正中央。此過程僅在我們必須連續將一張影象居中時才有效。
例如，建立一個 HTML 文件並使用 img 標籤放置一個影象。正確寫入 src 值並寫入 alt 以使影象因某種原因未顯示時有意義。在 src 屬性中使用佔位符影象 https://loremflickr.com/320/240。在 CSS 中，將 display 屬性設定為 block，併為其設定 0px auto 的 margin。根據我們的要求，margin 的第一個值設定為任意數字。
下面的示例顯示影象居中，因為我們將 display 值設定為 block，併為其設定了 0px auto 的 margin。
示例程式碼：
<img src="/img/DelftStack/logo.png" alt="Logo" />
img{
display: block;
margin: 0px auto;
}
在 CSS 中使用 text-align 屬性居中影象
我們可以使用 text-align CSS 屬性將影象居中。我們可以將影象包裹在 div 中並將 text-align 屬性設定為 center，然後影象將居中。這種方法可以將多張影象排成一行，與之前的方法只將一張影象居中。我們可以將這種方法用於單個和多個影象。
例如，建立一個 div 併為其指定一個 parent 類。然後，在 div 內，使用 img 標籤上傳影象。將 src 設定為 https://loremflickr.com/320/240，將 alt 設定為 cat。在 CSS 中，選擇 div 使用其類名，即 .parent，並將其 text-align 屬性設定為 center。
下面的示例顯示 div 內的影象居中，因為我們將 div 的 text-align CSS 屬性設定為 center。
示例程式碼：
<div class="parent">
<img src="/img/DelftStack/logo.png" alt="Logo" />
</div>
.parent{
text-align : center;
}
使用 flexbox CSS 屬性將影象居中
Flexbox 是應用最廣泛的 CSS 技術之一。flexbox 背後的主要思想是讓容器能夠改變其專案。我們可以通過將 display 屬性設定為 flex 來使用容器內的 flexbox 屬性。然後我們可以使用 justify-content: center 屬性將容器內的專案或影象水平居中。我們可以將 align-items 屬性設定為 center 以將專案垂直居中。
例如，建立一個 div 並將其命名為 container。然後使用帶有 src 和 alt 的 img 標籤在 div 中放置一個影象。選擇 div 使用其類名，即 .container，並將其 display 屬性設定為 flex。然後將 justify-content flexbox 屬性設定為 center。
下面的示例顯示 div 內的 image 使用 flexbox 屬性居中。
<div class="container">
<img src="/img/DelftStack/logo.png" alt="Logo" />
</div>
.container{
display: flex;
justify-content: center;
}