vertical-align:middle单独无效，因其仅对inline/inline-block元素生效，需父容器有line-height提供行框高度，并依赖兄弟元素或幽灵节点形成基线参照，否则无对齐基准。
vertical-align: middle 是最直接有效的起点，但必须配合图片显式设高或父容器 line-height 匹配，否则它只是“假装居中”。
为什么 vertical-align: middle 单独写没用？
因为 <img> 默认是 inline 元素，它的 vertical-align 只在行内上下文起作用——而这个“行”的高度由父容器的 line-height 或内容撑开。如果父容器没设 line-height，或者图片高度远超该值，middle 就找不到参考基准。
- 给
<img class="navbar-brand">加style="max-width:90%"（高度必须明确） - 同时确保其父容器（如
.navbar-brand或.navbar-header）有足够且稳定的line-height，比如line-height: 60px - 若父容器用了
display: flex，vertical-align直接失效——此时得靠align-items: center，但仅对直接子元素生效
align-items: center 在 Bootstrap 中怎么不生效？
常见原因不是代码写错，而是 Flex 布局前提被悄悄破坏。浏览器 DevTools 里一眼就能验证：
- 父容器是否真被设为
display: flex？Bootstrap 3 的.navbar默认是display: block，需手动加；Bootstrap 5 才默认 flex - 父容器有没有
height或min-height？没有的话，交叉轴无尺寸参考，align-items不触发 -
<img>和文字是否平级放在同一容器里？如果文字被<span></span>或<strong></strong>包裹，又没统一display，它们可能不是真正的 flex item
小屏幕折叠菜单里 Logo 上移怎么办？
折叠态下 .navbar-collapse 把所有内容转为垂直堆叠，flex 和 line-height 都失效。这时候不能硬套桌面逻辑，得用媒体查询单独调。
- 加专属规则：
@media (max-width: 767.98px) { .navbar-collapse .navbar-brand { padding-top: 12px; padding-bottom: 12px; } } - 如果 Logo 是
<img>，更精准的做法是微调图片本身：.navbar-collapse .navbar-brand img { margin-top: 4px; } - 千万别在折叠态还塞
d-flex align-items-center——它对垂直流布局没意义，反而增加渲染负担
滚动收缩后 Logo 突然上浮，怎么修？
这不是 CSS 写错了，是 JS 动态加的 .fixed-header-on 类触发了另一套样式，但 Logo 没同步适配。关键不是重写整个布局，而是做状态级补偿。
- 查 DevTools，确认
.fixed-header-on是否真实添加到<nav></nav>或<header></header>上 - 在相同断点下，针对该状态重置 Logo 垂直间距：
@media (min-width: 768px) { .fixed-header-on .navbar-brand { margin-top: 8px; } } - 比
margin更稳妥的是transform: translateY(-50%)+position: relative，它不干扰文档流，也不依赖父容器尺寸
真正麻烦的从来不是“怎么写那一行 CSS”，而是同一套规则在不同断点、不同 JS 状态、不同图片尺寸下表现不一致。调试时优先看 DevTools 里实际生效的 computed styles，而不是盯着源码猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
