1.利用margin與定位

設置margin自動適應,然后設置定位的上下左右都為0,就如四邊均衡受力從而實現盒子的居中；

2.利用table-cell

將父盒子設置為table-cell(能夠使元素呈單元格的樣式顯示)，并設置text-align: center(使內容水平居中)；vertical-align:middle(使內容垂直居中);。子盒子設置為inline-block可以使其內容變為文本格式，也可設置寬高；此方法父級需設置指定高度和寬度，負責無效

3.利用flex彈性盒子

詳解：

使用彈性盒子的時候需要給父級設置display:flex;

在父元素上設置水平justify-content:center;與垂直align-items:center;方向上的排列方式即可

4.利用定位+位移

詳解：

利用定位將子級進行向右下方向進行"驅逐"，使子級的左上角那一點相對于父級居中，然后使用transform(相對于自身的位移)進行反向位移

5.利用定位+margin(寬高的一半)

詳解：

利用定位將盒子擠向右下方，再利用margin進行反向回推。

(原理和定位+位移的方法如同一轍)

打開前端開發工具，新建一個html代碼頁面

在html代碼頁面上創建一個用于設置背景顏色的div標簽，然后給這個標簽添加上class = "bg-img"

設置背景圖片。創建style標簽，然后在標簽里面對類為bg-img設置背景圖片、圖片不重復、寬、高的樣式。

保存html代碼，使用瀏覽器打開，這個時候會發現瀏覽器上的背景圖片顯示在左上角。

回到html代碼頁面，在bg-img類里添加background-position: center的樣式。

保存html代碼后重新刷新瀏覽器，這個時候會發現瀏覽器上的背景圖片已經自動居中了。

將圖像水平居中的方法是使用display：flex。

同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。