使用Flexbox的justify-content: center可实现响应式页眉布局。首先构建包含logo和nav的header结构，通过display: flex将容器设为弹性布局，justify-content: center使导航项水平居中，align-items: center可垂直居中内容；接着设置.logo与.nav样式，确保文字清晰可读；为适配移动端，在max-width: 768px的媒体查询中改为flex-direction: column，使导航链接垂直排列，提升小屏点击体验；同时添加role="navigation"增强可访问性，使用rem单位保证可缩放性，并可进一步引入汉堡菜单优化窄屏显示。该方法简洁高效，兼顾美观与响应式需求。
要在CSS中创建一个响应式页眉布局，使用 Flexbox 配合 justify-content: center 是一种简洁高效的方法。它不仅能将导航项居中显示，还能在不同屏幕尺寸下保持良好的可读性和可用性。
使用 Flexbox 创建基础页眉结构
首先，在HTML中构建一个简单的页眉结构，包含网站标志和主导航链接：
<header class="header">
<div class="logo">MySite</div>
<nav class="nav">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
</header>
接着用CSS设置容器为弹性布局，并居中内容：
.header {
display: flex;
justify-content: center; /* 主轴居中对齐 */
align-items: center; /* 交叉轴居中（可选） */
padding: 1rem;
background-color: #333;
color: white;
}
.nav a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
实现响应式适配移动端
为了让页眉在小屏幕上依然可用，需要添加媒体查询来调整布局。例如，在屏幕变窄时，可以将导航项堆叠排列：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.header {
flex-direction: column;
text-align: center;
}
.nav a {
display: block;
margin: 0.5rem 0;
}
}
这样在手机上，导航链接会垂直排列，更易于点击。
增强可访问性与用户体验
为了提升可用性，可以加入一些额外优化：
- 给
nav添加role="navigation"提高屏幕阅读器识别 - 使用相对单位如
rem确保文本可缩放 - 为小屏幕考虑添加汉堡菜单（可通过JavaScript控制显隐）
基本上就这些。通过 display: flex 和 justify-content: center，你可以快速实现一个美观且响应式的页眉布局，再配合媒体查询，就能适应各种设备。不复杂但容易忽略细节。
