CSS Flexbox：固定顶部导航栏文本垂直居中教程
在网页开发中，固定顶部导航栏是非常常见的布局需求，很多开发者在实现导航栏时，经常会遇到文本无法完美垂直居中的问题。使用CSS Flexbox布局可以很轻松地解决这个问题，下面我们就一步步实现一个固定顶部导航栏，并让其中的文本实现垂直居中。
基础HTML结构搭建
首先我们需要搭建导航栏的基础HTML结构，通常导航栏会包含一个容器，内部有品牌标识和导航链接列表。这里我们使用语义化的<nav>标签作为导航栏容器，内部包含logo和导航链接列表：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定顶部导航栏示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 固定顶部导航栏 -->
<nav class="top-nav">
<div class="nav-logo">我的网站</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<!-- 页面主体内容，用于展示导航栏固定效果 -->
<main class="main-content">
<p>这是页面的主体内容，向下滚动可以看到导航栏始终固定在顶部。</p>
<p>为了模拟长页面，我们可以添加多段重复内容：</p>
<p>示例内容段落1</p>
<p>示例内容段落2</p>
<p>示例内容段落3</p>
<p>示例内容段落4</p>
<p>示例内容段落5</p>
</main>
</body>
</html>CSS样式实现固定与垂直居中
接下来我们通过CSS实现导航栏的固定定位，同时使用Flexbox让内部元素垂直居中。核心思路是给导航栏容器设置display: flex，结合align-items: center实现垂直方向居中，再用position: fixed让导航栏固定在顶部：
/* 重置默认样式，避免浏览器默认边距影响布局 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 给body添加顶部内边距，避免导航栏固定后遮挡主体内容 */
padding-top: 60px;
font-family: "Microsoft YaHei", sans-serif;
}
/* 固定顶部导航栏基础样式 */
.top-nav {
/* 固定定位，固定在视口顶部 */
position: fixed;
top: 0;
left: 0;
width: 100%;
/* 设置导航栏高度 */
height: 60px;
background-color: #2c3e50;
color: #fff;
/* 启用Flexbox布局 */
display: flex;
/* 垂直方向居中对齐 */
align-items: center;
/* 水平方向两端对齐，logo在左，链接在右 */
justify-content: space-between;
/* 设置内边距，让内容不贴边 */
padding: 0 20px;
/* 添加阴影提升视觉效果 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
/* logo样式 */
.nav-logo {
font-size: 20px;
font-weight: bold;
}
/* 导航链接列表样式 */
.nav-links {
/* 移除列表默认样式 */
list-style: none;
/* 链接列表也使用Flexbox布局，让链接横向排列 */
display: flex;
gap: 20px;
}
.nav-links li a {
color: #fff;
text-decoration: none;
font-size: 16px;
/* 给链接添加内边距，扩大点击区域 */
padding: 5px 10px;
/* 添加过渡动画，hover时更平滑 */
transition: color 0.3s ease;
}
.nav-links li a:hover {
color: #3498db;
}
/* 主体内容样式 */
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
line-height: 1.8;
}
.main-content p {
margin-bottom: 20px;
}核心属性说明
上面的实现中用到了几个Flexbox的核心属性，这里给大家做简单说明：
display: flex：将元素设置为Flex容器，其直接子元素会自动成为Flex项目，支持Flexbox相关属性控制布局。align-items: center：控制Flex项目在交叉轴（垂直方向，当flex-direction为row时）上的对齐方式，设置为center就是垂直居中。justify-content: space-between：控制Flex项目在主轴（水平方向，当flex-direction为row时）上的对齐方式，space-between会让第一个项目靠左，最后一个项目靠右，中间项目均匀分布。
另外需要注意导航栏使用position: fixed固定后，会脱离文档流，所以我们需要给body设置对应的padding-top，值等于导航栏的高度，避免导航栏遮挡下方的主体内容。
效果验证
完成上面的代码后，用浏览器打开HTML文件，向下滚动页面，可以看到导航栏始终固定在顶部，导航栏内的logo和链接文本都在垂直方向上居中显示，hover链接时还会有颜色变化的效果。如果需要调整导航栏高度或者文本大小，只需要修改对应的CSS属性值即可，Flexbox会自动适配新的尺寸，保持垂直居中效果。