div CSS導航居中是一種常用的網頁布局技術，可以讓導航菜單等元素在網頁中居中展示。本文將介紹如何使用div CSS實現導航居中的效果。

首先，我們需要在HTML中添加一個導航欄元素，例如：

```html

<div class="nav">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

接下來，我們需要為導航欄元素添加一個CSS樣式表，以便使其居中展示。我們可以使用以下代碼：

```css

.nav {

position: relative;

width: 200px;

text-align: center;

.nav ul {

list-style-type: none;

margin: 0;

padding: 0;

.nav li {

display: inline-block;

width: 100%;

text-align: center;

.nav a {

display: block;

text-align: center;

font-size: 16px;

margin-bottom: 10px;

最后，我們可以將這個樣式表應用到HTML文件中的`<div>`元素中，以確保導航菜單等元素在網頁中居中展示。例如：

```html

<div class="nav">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

這樣，導航菜單等元素就可以在網頁中居中展示了。

```css

.nav a {

display: block;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

font-size: 16px;

margin-bottom: 10px;