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

1. 使用Flex布局
2. 使用Grid布局

CSS技巧：實(shí)現(xiàn)Div元素居中顯示

在網(wǎng)頁設(shè)計(jì)中，將div元素置于頁面正中間是一種常見的布局需求，下面我們將介紹幾種實(shí)現(xiàn)這一效果的方法。

使用Flex布局

Flex布局是一種強(qiáng)大的CSS布局方式，可以輕松實(shí)現(xiàn)div元素的居中，為父元素設(shè)置display: flex;屬性，并使用justify-content: center;和align-items: center;屬性即可將子元素（即div）在水平和垂直方向上居中，示例代碼如下：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 可根據(jù)需要設(shè)置高度 */
}

使用Grid布局

CSS Grid布局也是一種可以實(shí)現(xiàn)div居中的方法，與Flex布局類似，只需為父元素設(shè)置display: grid;，然后利用justify-content和align-content屬性即可實(shí)現(xiàn)居中，示例代碼如下：

.parent {
  display: grid;
  place-items: center; /* 簡(jiǎn)寫形式，等同于justify-content和align-content都設(shè)為center */
  height: 100vh; /* 可根據(jù)需要設(shè)置高度 */
}

三. 使用***定位和transform屬性

此方法適用于需要將div相對(duì)于某個(gè)特定元素居中的情況，為父元素設(shè)置相對(duì)定位（relative），為子元素（即div）設(shè)置***定位（absolute），然后通過top、left、right和bottom屬性設(shè)置為50%，再使用transform屬性進(jìn)行微調(diào)，示例代碼如下：

.parent {
  position: relative; /* 或***定位，根據(jù)需要設(shè)置 */
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 將元素自身向左和向上移動(dòng)50% */
}

就是實(shí)現(xiàn)div元素居中顯示的幾種常見方法，可以根據(jù)實(shí)際需求選擇適合的方式。