CSS中的布局是網頁設計中最基礎也是最重要的一部分，其中div的居中是一項非常常見的操作。下面我們將介紹一些CSS技巧，通過將div居中，來讓你的網頁布局更加美觀和實用。

.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

使用以上的CSS代碼可以實現在屏幕中間垂直水平居中的div。我們通過display:flex來使子元素居中，而justify-content:center和align-items:center是居中的關鍵代碼。其中，height:100vh是指元素高度填滿屏幕高度，使元素不會被壓縮。

還可以通過以下代碼，使容器相對于父元素水平垂直居中：

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

以上CSS代碼將子元素的位置由固定值改成相對于父元素定位。利用top:50%和left:50%將子元素的坐標放在父元素的中心位置。于是，再通過transform:translate(-50%, -50%)來將子元素的中心位置移動回左上角。這樣一來，就實現了相對于父元素的水平垂直居中的效果。

總的來說，通過以上兩種方法的使用，我們可以達到在頁面上實現div居中的目的。在較為簡單的頁面布局中，這些方法有助于我們輕松設計出美觀完整的網站。