在開發一個網站的時候，導航欄是必不可少的一個元素。而要讓導航欄看起來更加美觀和專業，就需要進行一些CSS樣式的設置，其中包括將導航欄居中顯示。 首先，在HTML中設置導航欄的基本結構。一般情況下，導航欄是由一個ul列表構成的，每個列表項使用li表示，如下所示：

<ul class="nav"> 
 <li><a href="#">首頁</a></li>  
 <li><a href="#">關于我們</a></li>
 <li><a href="#">服務項目</a></li>
 <li><a href="#">聯系我們</a></li>
</ul>

接下來，我們需要對這個ul列表進行樣式的設置，將其居中顯示。可以使用以下樣式代碼：

.nav{
list-style:none; /*去除自帶的圓點樣式*/
padding:0;/*去除內邊距*/
margin:0 auto;/*左右居中*/
width:500px; /*設置導航欄的寬度*/
}
.nav li{
float:left;/*橫向浮動*/
text-align:center;/*文本居中*/
margin:0 10px;/*設置列表項之間的間距*/
}
.nav li a{
display:block;/*將鏈接元素變成塊級元素*/
line-height:40px;/*設置導航欄的垂直高度*/
color:#000;/*設置字體顏色*/
text-decoration:none;/*去除下劃線*/
}
.nav li a:hover{
background-color:#ccc;/*設置鼠標經過時的背景色*/
}

其中，margin:0 auto;是將導航欄居中的關鍵。當寬度固定的時候，可以使用這個樣式。如果不固定寬度，可以使用text-align:center來實現居中效果。 以上就是關于如何用CSS將導航欄居中顯示的方法。希望這篇文章對大家有所幫助。