在 Astro 项目开发中，导航栏是页面核心组成部分，常见的需求是让 Logo 靠左显示，导航链接组整体在导航栏内精准居中，这种局部居中的布局如果用常规 CSS 实现会比较复杂，结合 SCSS 可以简化样式管理，让布局逻辑更清晰。
项目基础结构准备
首先确保 Astro 项目已经安装 SCSS 支持，如果没有可以通过包管理工具安装相关依赖，然后创建导航栏组件和基础布局文件。
安装 SCSS 依赖
在项目根目录执行以下命令安装 SCSS 处理插件：
npm install @astrojs/sass --save-dev
然后在 astro.config.mjs 中引入并配置该插件：
import { defineConfig } from 'astro/config';
import sass from '@astrojs/sass';
export default defineConfig({
integrations: [sass()],
});
创建导航栏组件
在 src/components 目录下创建 Navbar.astro 组件，基础结构如下：
---
// 导航链接数据
const navLinks = [
{ name: '首页', url: '/' },
{ name: '文章', url: '/posts' },
{ name: '关于', url: '/about' },
];
---
<nav class="navbar">
<div class="navbar-logo">MySite</div>
<ul class="navbar-links">
{navLinks.map(link => (
<li class="navbar-link-item">
<a href={link.url}>{link.name}</a>
</li>
))}
</ul>
</nav>
核心 SCSS 样式编写
接下来编写 SCSS 样式实现 Logo 靠左、导航链接组居中的效果，核心思路是使用 flexbox 布局，通过 margin 属性调整链接组的定位。
基础导航栏样式
创建 src/styles/navbar.scss 文件，编写以下样式：
// 导航栏容器样式
.navbar {
display: flex;
align-items: center;
height: 60px;
padding: 0 20px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
// Logo 样式，固定在左侧
.navbar-logo {
font-size: 20px;
font-weight: bold;
color: #333333;
// 保证 Logo 在 flex 布局中靠左，不参与后续的空间分配
flex-shrink: 0;
}
// 导航链接组容器
.navbar-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
// 核心：让链接组整体居中
position: absolute;
left: 50%;
transform: translateX(-50%);
}
// 单个链接项样式
.navbar-link-item {
margin: 0 15px;
a {
text-decoration: none;
color: #666666;
font-size: 16px;
&:hover {
color: #1677ff;
}
}
}
样式逻辑说明
这里的核心布局逻辑是：
- 导航栏容器使用
display: flex和align-items: center保证子元素垂直居中 - Logo 设置
flex-shrink: 0避免被压缩，自然靠左显示 - 导航链接组使用绝对定位，
left: 50%让容器左边缘到导航栏中间，再通过transform: translateX(-50%)让链接组自身向左移动一半宽度，最终实现整体居中
引入样式并验证效果
在 Navbar.astro 组件中引入刚才编写的 SCSS 文件，然后在页面中调用该组件即可看到效果。
组件内引入样式
修改 Navbar.astro 的 frontmatter 部分，添加样式引入：
---
import '../styles/navbar.scss';
// 导航链接数据
const navLinks = [
{ name: '首页', url: '/' },
{ name: '文章', url: '/posts' },
{ name: '关于', url: '/about' },
];
---
页面中调用组件
在 src/pages/index.astro 中引入并使用导航栏组件：
---
import Navbar from '../components/Navbar.astro';
---
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>首页</title>
</head>
<body>
<Navbar />
<main>
<p>页面主体内容</p>
</main>
</body>
</html>
常见问题排查
如果实现后链接组没有完全居中，可以检查以下几点：
- 导航栏容器是否设置了
position: relative，绝对定位的子元素需要相对于该容器定位 - 导航链接组是否移除了默认的 margin 和 padding，避免额外空间影响居中计算
- Logo 是否没有设置固定宽度，避免占用过多空间导致视觉上居中偏移
如果需要在导航栏右侧添加额外元素，比如用户头像，可以在导航栏容器内添加对应元素，设置为 margin-left: auto 即可靠右显示，不会影响链接组的居中效果。