本文目錄導(dǎo)讀：

1. 使用flexbox布局
2. 使用position屬性

CSS中如何把div居中

在CSS中，將div元素居中顯示，可以通過(guò)多種方式實(shí)現(xiàn)，這里我們介紹兩種常用的方法：使用flexbox布局和使用position屬性。

使用flexbox布局

Flexbox是一種靈活的布局方式，可以方便地實(shí)現(xiàn)元素的居中顯示，我們可以通過(guò)設(shè)置容器的display屬性為flex，并利用justify-content和align-items屬性來(lái)實(shí)現(xiàn)div的居中。

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

在上面的代碼中，我們?cè)O(shè)置了一個(gè)名為container的容器，并將其display屬性設(shè)置為flex，我們通過(guò)justify-content和align-items屬性將容器中的內(nèi)容居中顯示，這樣，我們就可以將div元素居中顯示了。

使用position屬性

除了使用flexbox布局外，我們還可以利用CSS中的position屬性來(lái)實(shí)現(xiàn)div的居中顯示，我們可以通過(guò)設(shè)置容器的position屬性為relative，并利用top、left、right和bottom屬性來(lái)調(diào)整div元素的位置。

.container {
  position: relative;
}
.div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的代碼中，我們?cè)O(shè)置了一個(gè)名為container的容器，并將其position屬性設(shè)置為relative，我們?cè)O(shè)置div元素的position屬性為absolute，并利用top和left屬性將div元素的左上角移動(dòng)到容器的中心位置，我們通過(guò)transform屬性將div元素沿著其自身中心進(jìn)行縮放和平移，從而實(shí)現(xiàn)div元素的居中顯示。