有許多方法可以将HTML元素與CSS對齊，但是一起使用或單獨使用它們并不是那麼容易。開發人員所面臨的困難之一就是試圖将元素集中在頁面中間。

因此，在本文中，我将展示一些最常用的方法，即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。

讓我們開始使用3個不同的CSS屬性将圖像水平居中。

使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當圖像位于塊級容器（例如<div>）内時，此方法才有效：

使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨使用margin：Auto将不适用于圖像。如果需要使用margin：auto，則還必須使用2個其他屬性。

margin-auto屬性對内聯級别的元素沒有任何影響。由于<img>标簽是一個内聯元素，因此我們需要先将其轉換為塊級元素：

其次，我們還需要定義寬度。因此，左右邊緣可以占用其餘的空白空間并自動對齊，可以這樣解決問題（除非我們給出100％的寬度）：

将圖像水平居中的第三種方法是使用display：flex。同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。

justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最後，圖像的寬度必須小于容器的寬度，否則，它會占用100％的空間，然後我們就無法對其進行集中化。

1、Display: Flex

對于垂直對齊，使用display：flex确實很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：

現在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：

如果将align-items屬性與display：flex一起使用，就會将元素垂直放置。

2、位置：絕對和變換屬性

垂直對齊的另一種方法是一起使用position和transform屬性。這個有點複雜，所以讓我們一步一步地做。

步驟1：定義絕對位置

首先，我們将圖像的定位行為從靜态更改為絕對：

同樣，它應該位于相對放置的容器内，因此我們添加一個位置：相對于其容器的div。

步驟2：定義頂部和左側屬性

其次，我們定義圖像的頂部和左側屬性，并設置為50％。這會将圖像的起點（左上角）移到容器的中心：

步驟3：定義變換屬性

在第二步的時候已經将圖像的一部分移出容器。因此，我們需要将其取回内部。在圖像上定義轉換屬性，并在其X和Y軸上添加負50％可以達到目的：

還可以使用其他方法進行水平和垂直居中，我這裡隻嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!