页眉logo水平居中首选给加text-align: center，若用flex布局则改用justify-content: center或margin: 0 auto（需设display: block和width）；内须含–以满足可访问性。
页眉里的 logo 或文字水平居中，首选给 <header></header> 加 text-align: center，不是给 <img> 或子元素加；如果页眉里还用了 flex 布局（比如要对齐导航），那就得换用 justify-content: center。
为什么 text-align: center 要加在父容器上而不是 <img> 上
因为 text-align 是控制“行内内容在块级容器中如何对齐”的属性，它只对子元素生效，不对自身起作用。把 text-align: center 写在 <img> 的 style 里完全无效。
- 正确写法：
<header style="text-align: center;"><img src="logo.png"></header> - 错误写法：
<img src="logo.png" style="max-width:90%"> - 常见干扰：如果
<header></header>已设display: flex，text-align就会被忽略——flex 容器的对齐由justify-content控制
当页眉用 display: flex 时，怎么让 logo 水平居中
现代页眉普遍用 flex 排版（比如 logo 左对齐、nav 右对齐），这时不能再依赖 text-align，而要靠 flex 自身的对齐机制。
- 若整个
<header></header>只放一个 logo，直接加justify-content: center - 若 logo 和 nav 并存，又想 logo 居中，可用
margin: 0 auto作用于 logo 元素本身（前提是它没被设为flex-item或有其他 flex 影响） - 注意：
margin: 0 auto对 flex item 默认无效，需先加margin-inline: auto或显式设置margin-left: auto; margin-right: auto
用 margin: 0 auto 居中 logo 时的硬性前提
这个方法只对块级、定宽元素可靠，用在 <img> 上必须做两件事：
- 给
<img>加display: block（否则它是行内元素，margin: 0 auto不生效） - 明确设置
width（哪怕只是width: fit-content或具体像素值） - 确保其父容器是常规文档流中的块级容器（不能是
position: absolute或display: inline-block等意外上下文）
容易被忽略的语义和可访问性细节
用 <header></header> 本身没问题，但很多人忘了它必须包含至少一个标题级元素（<h1></h1>–<h6></h6>），否则屏幕阅读器无法识别这是页眉区域。
- 常见翻车：只放
<img>和<nav></nav>，没加<h1></h1>，Lighthouse 会报 “<header></header>lacks heading” - 补救方式：加隐藏但可读的标题，如
<h1 class="visually-hidden">我的网站</h1>，配合 CSS.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } - 别把整个页面塞进
<header></header>——它只管“识别上下文”，不管布局容器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
