這篇文章主要介紹了怎么用CSS將DIV居中的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么用CSS將DIV居中文章都會有所收獲，下面我們一起來看看吧。

為西充等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及西充網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、西充網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

首先，我們先來看一下DIV居中的兩種情況，一種是DIV在瀏覽器窗口內(nèi)居中，另一種是DIV在它所在的容器中居中。

第一種情況，即DIV在瀏覽器窗口內(nèi)居中。我們可以通過以下幾種方法來實現(xiàn)。

方法一：使用絕對定位和margin

首先，我們將DIV設(shè)為絕對定位（position: absolute;），并將左、上、右、下四個方向都設(shè)為0，使其占滿整個瀏覽器窗口。然后，我們再將margin屬性設(shè)置為auto，就可以使DIV在水平和垂直方向上都居中了，如下所示：

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

方法二：使用flexbox布局

flexbox（彈性布局）是一種非常流行的布局方式，它可以很方便地實現(xiàn)垂直和水平方向上的居中，代碼如下：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

我們將DIV所在的容器設(shè)為flexbox布局（display: flex;），并設(shè)置align-items和justify-content屬性都為center，就可以讓DIV在垂直和水平方向上都居中了。

方法三：使用grid布局

grid布局是一種比flexbox布局更加強大的布局方式，它可以實現(xiàn)更加復雜的布局效果。在實現(xiàn)DIV居中方面，它可以這樣寫：

.container {
  display: grid;
  place-items: center;
}

我們將DIV所在的容器設(shè)為grid布局（display: grid;），并將place-items屬性設(shè)為center，就可以使DIV在垂直和水平方向上都居中了。

第二種情況，即DIV在它所在的容器中居中。我們可以采用以下幾種方式實現(xiàn)。

方法一：使用text-align屬性

如果DIV是行內(nèi)元素，我們可以將它所在的容器的text-align屬性設(shè)置為center，就可以使DIV在水平方向上居中了。代碼如下：

.container {
  text-align: center;
}

div {
  display: inline-block;
}

這里我們將DIV設(shè)為inline-block元素，以便能夠?qū)λO(shè)置width屬性。然后，將DIV所在的容器的text-align屬性設(shè)置為center，就可以使DIV在水平方向上居中了。

方法二：使用margin屬性

如果DIV是塊級元素，我們可以使用margin屬性來實現(xiàn)居中。代碼如下：

div {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

這里我們將DIV設(shè)為塊級元素，并將其寬度設(shè)為200px，高度設(shè)為200px。然后，將DIV的左右margin都設(shè)為auto，就可以使DIV在水平方向上居中了。

方法三：使用flexbox布局

同樣，我們可以使用flexbox布局來實現(xiàn)DIV在它所在容器中的居中。代碼如下：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 200px;
  height: 200px;
}

我們將DIV所在的容器設(shè)為flexbox布局，并將align-items和justify-content屬性都設(shè)為center，就可以使DIV在垂直和水平方向上都居中了。

關(guān)于“怎么用CSS將DIV居中”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“怎么用CSS將DIV居中”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。