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伪类用来设置鼠标悬停时的文本颜色为蓝色，提高了用户体验。