在 div 容器中將元素居中有時(shí)會(huì)變得棘手。知道到底什么會(huì)起作用，而不是每次制作網(wǎng)頁的前端時(shí)都進(jìn)行試驗(yàn)，這一點(diǎn)非常重要。

　　如何使用CSS居中潛水？

　　現(xiàn)在，使元素居中不僅意味著 div 組件居中。通過居中，我將專注于:

　　水平居中

　　垂直居中

　　水平和垂直居中(組件居中)

　　默認(rèn)情況下，網(wǎng)頁內(nèi)容從屏幕的左上角開始，從左向右移動(dòng)。

　　讓我們首先將圖像水平居中在 div 組件中。之后，我們將垂直居中圖像，然后將圖像完全居中。

　　將圖像水平居中

　　使用文本對(duì)齊水平居中 Div 中的圖像

　　假設(shè)您有一個(gè) div，您可以在其中按以下方式插入圖片：

　　現(xiàn)在，我將應(yīng)用CSS樣式，以便圖像變得可見。您可以看到，現(xiàn)在圖像處于其默認(rèn)位置。

　　我們通常使用文本對(duì)齊方法來使文本居中。但是，我們也可以在容器內(nèi)的圖像上使用它。

　　僅當(dāng)我們?cè)谌萜髦惺褂么酥刀皇菆D像時(shí)，此方法才有效。

　　使用自動(dòng)邊距將 div 中的圖像水平居中

　　可用于在 div 容器中將圖像水平居中的另一種方法是具有值 auto 的 margin 屬性。

　　在此方法中，元素將占用指定的寬度，并且空白區(qū)域?qū)⒃谧筮吘嗪陀疫吘嘀g平均拆分。我們將在映像上應(yīng)用此屬性，而不是在容器上應(yīng)用此屬性。答案是肯定的!在此之前，我們需要指定圖像的寬度，以便 margin 屬性能夠平均拆分空白區(qū)域。

　　我們需要記住的另一件事是，margin 屬性不適用于內(nèi)聯(lián)級(jí)元素。在這里，我們的圖像是內(nèi)聯(lián)的，因此我們將通過將顯示屬性設(shè)置為塊來將其轉(zhuǎn)換為塊元素。

　　使用位置和變換屬性將 div 中的圖像水平居中

　　這種方法可能很棘手，但我們將逐步進(jìn)行，以免出現(xiàn)任何錯(cuò)誤。首先，我們將設(shè)置位置屬性，然后設(shè)置轉(zhuǎn)換屬性。

　　因此，現(xiàn)在您需要首先將容器的位置設(shè)置為相對(duì)位置，并將圖像位置設(shè)置為絕對(duì)位置。通過這樣做，您可以向左，向右，頂部和底部移動(dòng)圖像。

　　但現(xiàn)在我們只想向左移動(dòng)50%或向右移動(dòng)50%。現(xiàn)在它將如下圖所示。

　　如您所見，它仍然不能完美地放置在中心。這是因?yàn)槲覀兩形捶峙滢D(zhuǎn)換屬性，我們將將其值設(shè)置為 translateX。

　　使用顯示彈性水平居中 div 中的圖像

　　如您所見，使用位置和轉(zhuǎn)換屬性可能是一項(xiàng)繁瑣的任務(wù)。CSS 彈性框使制作響應(yīng)式布局變得更加容易。我們還可以使用它通過利用具有值flex的顯示屬性將圖像水平放置在容器的中間。

　　僅此一項(xiàng)是行不通的，您需要定義圖像的位置。它可以是中心，左和右：

　　讓我們看一下如何在 div 中垂直居中圖片。稍后，我們將介紹如何將 div 中的圖像水平和垂直居中，從而創(chuàng)建一個(gè)完美的中心。

　　將 div 中的圖像垂直居中

　　使用顯示撓曲將 div 中的圖像垂直居中

　　以前，我們使用顯示-flex方法水平居中。我們將使用類似的方法。

　　這一次，您不需要使用對(duì)齊內(nèi)容屬性。請(qǐng)改用對(duì)齊項(xiàng)屬性。

　　若要使此方法正常工作，請(qǐng)確保指定了容器的高度。以便您可以計(jì)算 div 分量的中心。

　　使用位置和變換屬性垂直居中 div 中的圖像

　　你將要做一些類似于你所做的水平居中的事情。

　　這一次，您不會(huì)使用左或右，而是使用頂部和底部來確保垂直居中。當(dāng)我們需要垂直移動(dòng)圖像時(shí)，我們將使用過渡屬性值作為plainY。

　　在 div 中將圖像居中

　　使用顯示-flex 將 div 中的圖像居中

　　為了將圖像垂直和水平居中，應(yīng)使用 display-flex 屬性。

　　為此，請(qǐng)將兩端對(duì)齊內(nèi)容和對(duì)齊項(xiàng)屬性設(shè)置為值中心。

　　使用位置和變換屬性在 div 中居中圖像

　　您一定從以前的方法中得到了一個(gè)想法，即我們正在組合從水平和垂直居中學(xué)到的屬性。這也是你現(xiàn)在要做的。

　　您還可以使用翻譯 (X，Y) 組合翻譯 X 和翻譯Y。

　　結(jié)語

　　在本教程中，你已了解如何使圖像在 div 中垂直、水平或兩者居中。

　　將圖像居中時(shí)，您會(huì)經(jīng)常選擇Flexbox方法，而不是難以使用的位置方法，這可能會(huì)扭曲您的網(wǎng)站。