在網頁設計中，常常需要將一個div元素水平垂直居中顯示。這一需求可以通過CSS的flexbox布局和定位屬性來實現。本文將通過幾個代碼案例，詳細解釋如何使用這些方法來實現<div>中<div>水平垂直居中顯示。

案例一：使用flexbox布局

\<pre>css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
<br>
.subdiv {
width: 100px;
height: 100px;
background-color: lightgray;
}
\

在這個案例中，我們通過給包含div元素的父級容器加上display: flex屬性，使其成為一個flex容器。然后，通過justify-content: center和align-items: center屬性，將子div元素水平和垂直居中顯示。這樣就實現了<div>中<div>水平垂直居中顯示的效果。

案例二：使用絕對定位

\<pre>css
.container {
position: relative;
height: 200px;
}
<br>
.subdiv {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: lightgray;
}
\

在這個案例中，我們通過給父級容器設置position: relative屬性，使其成為一個相對定位的容器。然后，給子div元素設置position: absolute屬性，使其相對于父級容器進行絕對定位。通過設置top: 50%和left: 50%，讓子div元素的左上角位于父級容器的中心位置。最后，使用transform屬性的translate函數來將子div元素向左上角平移自身寬度和高度的一半，從而實現水平和垂直居中顯示的效果。

案例三：使用table-cell屬性

\<pre>css
.container {
display: table-cell;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: lightgray;
}
<br>
.subdiv {
display: inline-block;
width: 100px;
height: 100px;
background-color: white;
}
\

在這個案例中，我們將父級容器的display屬性設置為table-cell，使其顯示為一個表格單元格。然后，通過text-align: center和vertical-align: middle屬性，將子div元素水平和垂直居中顯示。同時，我們還給子div元素設置display: inline-block屬性，使其在單元格中垂直居中顯示。

通過以上三個案例，我們可以看到，使用CSS的flexbox布局、絕對定位和table-cell屬性都能較為簡單地實現<div>中<div>水平垂直居中顯示。根據實際需求和兼容性考慮，選擇適合的方法來實現這一效果。