固定定位的 header 在现代网页里几乎是标配，但往里面塞一张 logo 图片时，问题往往比想象中多：图片明明设置了宽度却莫名变形，垂直方向上总差那么几个像素对不齐，或者 header 把页面内容盖住了一截。这些问题的根源大多不在 logo 本身，而在固定定位容器的尺寸机制和图片的默认渲染行为上。本文把常见踩坑点逐一拆解，并给出可直接套用的布局方案。
固定定位 header 的基础结构要先搭对
所谓固定定位，就是给 header 设置 position: fixed，让它脱离文档流并始终贴在视口顶部。很多新手容易忽略的一点是：固定定位元素脱离文档流之后，原本占据的空间会被释放，页面下方的内容会向上顶，最终被 header 遮住。所以除了 header 本身，还需要给 body 加一个等于 header 高度的上内边距，或者用一个同高度的占位元素。
其次，position: fixed 的元素如果没有显式设置宽度，会根据内容收缩，而不是像块级元素那样默认占满一行。因此通常需要写 left: 0; right: 0; 或者 width: 100% 来保证 header 横向铺满。一个稳妥的基础结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding-top: 64px; /* 补偿 header 高度，防止内容被遮挡 */
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.12);
display: flex;
align-items: center; /* 垂直居中的关键 */
padding: 0 24px;
box-sizing: border-box;
}
</style>
</head>
<body>
<header class="site-header">
<img class="logo" src="logo.png" alt="站点logo">
</header>
<p>这里是页面正文内容</p>
</body>
</html>
这个结构里有两个细节值得注意。一是 align-items: center，它让 header 内的所有子元素在交叉轴（这里是垂直方向）居中，这比手动写 margin-top 或绝对定位加 top: 50% 再偏移的方式干净得多。二是 box-sizing: border-box，如果不加，padding 会撑大 header 的实际高度，导致视觉高度和 64px 对不上，body 的补偿值也就不准了。
logo 图片等比缩放的三种写法与取舍
缩放图片时最容易犯的错误是同时写死宽度和高度，比如 width: 120px; height: 64px。一旦 logo 的原始比例和这个容器不一致，图片就会被拉伸变形。等比缩放的核心原则是：只约束一个维度，另一个维度交给浏览器自动计算，或者使用 object-fit 来控制填充方式。
第一种做法是只限制高度。因为 header 高度是固定的，用 max-height 留出上下留白是最直觉的方案：
.logo {
max-height: 40px; /* 64px 的 header 减去上下留白 */
width: auto; /* 宽度按原始比例自动计算 */
display: block; /* 消除图片底部的基线空隙 */
}
这里必须解释一下 display: block 的作用。<img> 默认是行内替换元素，会按照基线对齐，基线下方还会预留一段给字母下延部分的空间，这就是很多页面上图片底部出现几像素神秘空隙的原因。改成块级或弹性布局的子项后，这个空隙就消失了。
第二种做法是使用 object-fit，适合既想限制宽高又不想变形的场景。比如 logo 区域被设计稿规定为 160px × 40px 的固定框，但图片比例不一定吻合，此时可以这样写：
.logo {
width: 160px;
height: 40px;
object-fit: contain; /* 保持比例，完整显示，可能留白 */
object-position: center;
}
object-fit 有几个常用取值需要区分：contain 是完整显示图片、容器内可能留白；cover 是填满容器、超出部分被裁剪；fill 则不管比例强行拉伸，等于没设。对 logo 来说一般选 contain，因为品牌图形被裁掉一角通常是不可接受的。配合 object-position: center 可以保证留白均匀分布在两侧，视觉上居中。
第三种做法针对矢量图（SVG 格式的 logo）。SVG 可以无损缩放，直接把宽高设为一致的百分比或像素值也不会模糊，甚至可以用 height: 1em 让 logo 跟随文字大小缩放。不过要注意，如果 SVG 内部没有设置 viewBox，浏览器无法正确计算比例，缩放后会出问题，这一点在设计师导出文件时就要确认好。
水平居中的完整方案与多元素共存的处理
只放一张 logo 时，水平居中很简单，在 flex 容器上加 justify-content: center 即可。但真实的 header 往往是 logo 在左、导航居中、操作按钮在右的复合结构，这时候需要用更完整的 flex 布局来分配空间。
<style>
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
box-sizing: border-box;
background: #fff;
}
.logo {
max-height: 40px;
width: auto;
display: block;
}
.nav {
display: flex;
gap: 24px;
align-items: center; /* 导航文字与 logo 垂直居中对齐 */
}
</style>
<header class="site-header">
<img class="logo" src="logo.png" alt="站点logo">
<nav class="nav">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于</a>
</nav>
</header>
如果设计稿要求 logo 严格处于页面正中央，导航项左右对称分布，可以用三段式布局：header 内放左、中、右三个区域，中间区域用绝对定位居中，或者给左右两个区域设置 flex: 1 让中间自然落在视口中心。绝对定位的写法如下：
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
}
.logo-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-height: 40px;
width: auto;
}
这种写法要注意一个隐患：当视口宽度很窄时（比如手机横屏或缩放浏览器窗口），绝对定位居中的 logo 可能和左右两侧的内容重叠。建议配合媒体查询处理，窄屏时改回文档流布局，或者干脆把 logo 放到第二行。另外 transform: translateX(-50%) 比 margin-left: -80px 这类写死负边距的方式更好维护，因为不需要知道 logo 的具体宽度。
最后再补充移动端的适配要点：固定 header 在小屏上高度通常会压缩到 48px 到 56px，logo 的 max-height 也要相应调小，最好把尺寸变量抽到 CSS 自定义属性里统一管理，比如 --header-h: 64px 和 --logo-h: 40px，媒体查询里只改变量，一处修改全局生效，后续维护成本会低很多。
固定定位headerCSS logo居中图片等比缩放修改时间：2026-09-08 15:13:25