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

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

CSS規(guī)則定義div居中

在CSS中，我們可以使用多種方法來將div元素居中，這里，我們將介紹兩種常用的方法：使用flexbox和使用position屬性。

使用flexbox

Flexbox是一種靈活的布局方式，可以輕松地實現(xiàn)div元素的居中，我們可以通過設(shè)置display屬性為flex，并使用justify-content和align-items屬性來控制div元素的水平和垂直居中。

假設(shè)我們有一個名為container的div元素，我們需要將其子元素center_div居中，我們可以使用以下CSS代碼來實現(xiàn)：

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

在這個例子中，center_div元素將會被水平和垂直居中。

使用position屬性

除了使用flexbox外，我們還可以使用position屬性來實現(xiàn)div元素的居中，我們可以通過設(shè)置position屬性為relative或absolute，并使用top、right、bottom和left屬性來調(diào)整div元素的位置。

假設(shè)我們有一個名為container的div元素，我們需要將其子元素center_div居中，我們可以使用以下CSS代碼來實現(xiàn)：

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

在這個例子中，center_div元素將會被水平和垂直居中，需要注意的是，這種方法需要考慮到容器的尺寸和位置。