CSS導航欄懸浮居中可以為網站增添美觀度和易用性，提高用戶體驗。下面讓我們一起學習如何實現CSS導航欄懸浮居中。

/* HTML代碼 */
<div class="navbar">
<ul class="nav-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
/* CSS樣式 */
.navbar {
display: flex;
justify-content: center; 
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
z-index: 1;
}
.nav-menu {
display: flex;
justify-content: center; 
list-style: none;
margin: 0;
padding: 0;
font-size: 18px;
}
.nav-menu li {
margin: 0 20px;
}
.nav-menu li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
.nav-menu li a:hover {
color: #0074bd;
}

首先，在HTML代碼中，我們用一個帶有類名為navbar的div元素包裹了橫向的ul列表元素，ul列表元素的類名為nav-menu，內部包含四個li列表元素和每個列表元素內的a標簽元素。 接下來，在CSS樣式中，使用display:flex屬性和justify-content:center屬性實現了導航欄的橫向排列和居中對齊，通過position:fixed屬性和top:0屬性使導航欄固定在頁面頂部，寬度設為100%使其覆蓋整個頁面寬度。background-color屬性為白色，z-index屬性設置為1，使導航欄在瀏覽器窗口中處于最上層。 對于ul列表元素，我們同樣使用display:flex屬性和justify-content:center屬性，以及list-style:none屬性將列表的序號隱藏。margin和padding設為0，font-size屬性設置為18px，使導航欄具有合適的間距和字體大小。 對于li列表元素和內部的a標簽元素，margin屬性設為0 20px，實現每個列表元素之間的間距。a標簽元素使用display:block屬性和padding:10px 15px屬性，使每個列表元素的鏈接元素占據整個列表元素空間，同時給超鏈接提供足夠的內部填充，提高了可點擊性和易用性。text-decoration:none屬性使鏈接消除下劃線效果，color屬性設置文本顏色為黑色，:hover偽類用來設置鼠標懸停時的文本顏色為藍色，提高了用戶體驗。