CSS 可以幫助我們很容易地將一個 div 水平和垂直居中。以下是兩種常規(guī)方法：

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

上面的代碼定義了一個具有 flex 布局的 div，將其內(nèi)容居中，用來達到垂直和水平居中。

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

上面的代碼將 div 相對于其父元素定位，使其上下和左右居中，使用 transform 屬性將其定位到中心。

接下來讓我們看一些更高級的方法。首先，如果 div 的高度和寬度都是已知的，那么我們可以通過這樣做將其居中：

.center3 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height: 100px;
width: 200px;
background-color: #f2f2f2;
}

這樣做的關(guān)鍵在于使用 position: absolute; 和設(shè)置頂部和左側(cè)值為 50%。然后，我們使用負的 margin-top 和 margin-left 來水平和垂直居中 div，并設(shè)置高度和寬度。

如果情況不是這樣，可以使用 Flexbox。以下代碼確保 div 始終保持正方形，并且該正方形始終以其寬度居中：

.center4 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 0;
padding-bottom: 50%;
background-color: #f2f2f2;
}

這里，我們使用 padding-bottom 的方式來確定 div 的高度，該高度等于它的寬度（50%），從而創(chuàng)建一個正方形。使用 display: flex; 將內(nèi)容垂直和水平居中。