<div 頁面正中指的是將一個元素（通常是一個盒子）在網頁的水平和垂直方向上居中顯示。這在網頁設計中是非常常見的需求，可以通過多種方式實現。
一種常見的方式是使用CSS的flex布局。通過設置容器的display屬性為flex，并使用justify-content和align-items屬性來控制元素的水平和垂直居中。以下是一個示例代碼：

<style>
.container {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
height: 300px; /*設置容器的高度*/
}
<br>
.box {
width: 200px; /*設置盒子的寬度*/
height: 200px; /*設置盒子的高度*/
background-color: #ff0000; /*設置盒子的背景顏色*/
}
</style>
<br>
<div class="container">
<div class="box"></div>
</div>

在上面的代碼中，我們創建了一個名為container的容器，將其display屬性設置為flex，并設置了其高度為300px。然后，我們在container內部創建了一個名為box的盒子，設置了其寬度和高度，并給其添加了一個紅色的背景色。通過設置容器的justify-content屬性為center和align-items屬性為center，我們實現了box元素在頁面的水平和垂直方向上的居中顯示。
除了flex布局，還可以使用position屬性來實現頁面元素的居中顯示。以下是一個使用position屬性的示例代碼：

<style>
.container {
position: relative; /*設置容器定位為相對定位*/
width: 500px; /*設置容器寬度*/
height: 400px; /*設置容器高度*/
border: 1px solid #000; /*設置容器邊框*/
}
<br>
.box {
position: absolute; /*設置盒子定位為絕對定位*/
top: 50%; /*設置盒子距離容器頂部的距離為容器高度的一半*/
left: 50%; /*設置盒子距離容器左側的距離為容器寬度的一半*/
transform: translate(-50%, -50%); /*使盒子在自身的水平和垂直方向上居中*/
width: 200px; /*設置盒子的寬度*/
height: 200px; /*設置盒子的高度*/
background-color: #ff0000; /*設置盒子的背景顏色*/
}
</style>
<br>
<div class="container">
<div class="box"></div>
</div>

在上面的代碼中，我們創建了一個名為container的容器，并將其position屬性設置為relative，以便內部的box元素可以相對于容器進行定位。然后，我們在container內部創建了一個名為box的盒子，將其position屬性設置為absolute，以便可以根據其外層容器進行定位。通過設置盒子的top屬性為50%和left屬性為50%，我們將其定位到容器的正中位置。最后，通過使用transform屬性和translate函數，我們實現了盒子在自身的水平和垂直方向上的居中顯示。
以上是關于如何實現<div 頁面正中>的兩種方式的介紹和示例代碼。通過使用flex布局和position屬性，我們可以輕松地將一個元素在網頁中水平和垂直方向上居中顯示，以滿足不同的設計需求。希望以上內容對您有所幫助！