在網頁設計中，導航欄是必不可少的元素之一。然而，很多時候我們會遇到導航欄水平居中的問題。本文將介紹如何使用CSS將導航欄水平居中。 首先，我們需要在HTML中創建一個導航欄。一般來說，我們使用一個ul標簽和多個li標簽來創建導航欄，如下所示：

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
</ul>

接下來，我們需要使用CSS來將導航欄水平居中。我們可以使用以下代碼：

.nav {
display: flex;
justify-content: center;
}

上述代碼中，我們使用了display屬性和justify-content屬性。其中，display屬性用于定義元素的顯示方式，這里我們使用了flex值。而justify-content屬性用于定義元素沿著主軸的對齊方式，這里我們使用了center值。 如果我們想讓導航欄右對齊，可以使用以下代碼：

.nav {
display: flex;
justify-content: flex-end;
}

上述代碼中，我們改變了justify-content的值為flex-end，讓元素沿著主軸右對齊。 總之，使用CSS將導航欄水平居中是一件非常簡單的事情，只需要使用display和justify-content屬性即可。