在網(wǎng)頁布局中，經(jīng)常會遇到需要將一個或多個div元素居中的情況，本文將介紹兩種常用的CSS方法來實現(xiàn)div居中。

方法一：使用CSS Flex布局

.container {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}

使用CSS Flex布局非常方便，只需要對包含div的容器元素設(shè)置display:flex屬性，再通過justify-content和align-items屬性來指定水平和垂直居中即可。其中，justify-content有以下幾個取值：

• flex-start：默認值，左對齊
• flex-end：右對齊
• center：居中對齊
• space-between：兩端對齊
• space-around：每個元素周圍留有空間的對齊

同樣地，align-items屬性也有以下幾個取值：

• flex-start：默認值，頂部對齊
• flex-end：底部對齊
• center：居中對齊
• stretch：垂直拉伸

方法二：使用CSS定位

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

使用CSS定位也是一種比較常見的div居中方法。使用絕對定位，將div元素的top和left屬性都設(shè)置為50%，再通過transform屬性來調(diào)整div元素的偏移量，使其居中。

需要注意的是，使用CSS定位需要將div元素的包含容器元素的position屬性設(shè)置為relative，否則div元素的定位會受到其他元素的影響。

通過這兩種方法，我們可以輕松實現(xiàn)div元素在其包含容器元素中居中對齊，提高網(wǎng)頁布局的美觀程度。