页头图片水平居中首选text-align: center（加在父容器上），垂直居中需父容器设display: flex、justify-content和align-items居中及明确高度；margin: 0 auto和绝对定位为备选方案。

页头图片用 text-align: center 最快生效

绝大多数页头（<header></header> 或顶部 <div>）里放一张 logo 图，水平居中就该用 <code>text-align: center ——不是给 <img> 加，而是给它的父容器加。

常见翻车点：把 text-align: center 写在 <img> 标签的 style 里，完全没效果；或者父容器被设成 display: flex，直接覆盖了 text-align。

• 确保父容器是块级元素（比如 <header></header>、<div>），且没意外设置 <code>float 或 display: inline-block
• <img> 保持默认 display: inline 即可，不用改
• 如果页头里还有文字（比如网站名），它们会和图片一起居中，这是预期行为
• 示例：<header style="text-align: center;"><img src="logo.png" alt="Logo"></header>

想同时垂直居中？必须用 flex，但别乱套在 上

页头高度固定（比如 height: 80px）时，flex 是唯一靠谱的双向居中方案。关键不是“怎么写”，而是“写在哪”——必须作用于页头容器本身，且它得有明确高度。

很多人只写 justify-content: center，结果图片还是贴顶，就是因为漏了 align-items: center 和父容器高度约束。

• 给 <header></header> 加：display: flex; justify-content: center; align-items: center; height: 80px;
• 不要给 或整个页面加 display: flex，否则所有直系子元素（导航、主内容等）布局全乱
• 若页头高度不固定（比如响应式设计），用 min-height 替代 height，避免内容被截断
• 旧 Android 浏览器需补 display: -webkit-flex

margin: 0 auto 在页头里容易失效

这个方法看似简单，但在页头场景下几乎总是出问题：页头容器常被设为 width: 100% 或 max-width，导致 margin: 0 auto 失去计算依据；更常见的是页头用了 flex 布局（比如内嵌导航菜单），直接废掉 auto 行为。


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载

除非你明确控制页头宽度（比如 width: 1200px），且确认它没被其他 CSS 覆盖，否则别碰这个方案。

• 必须同时满足：display: block（给 <img>）、明确 width（不能是 100% 或未设）、父容器非 flex/grid
• 页头里如果还有导航栏、按钮等其他元素，margin: 0 auto 只动图片，布局易失衡
• 兼容性虽好（IE8+），但实际在现代页头中适用场景极少

绝对定位 + transform 是最后手段

只有当你无法控制页头容器样式（比如嵌入第三方 CMS 模板，只能改 <img> 自身），才考虑这个方案。它脱离文档流，对后续元素无影响，但需要手动处理响应式缩放。

核心是两步：position: absolute 把图片拉到容器中心点，再用 transform: translate(-50%, -50%) 回退自身宽高的一半。

• 父容器必须设 position: relative，否则 absolute 会相对于 定位
• top: 50%; left: 50% 是起点，transform 才真正居中
• 图片尺寸变化时（如视口缩放），transform 依然精准，但需额外加 max-width: 100% 防溢出
• 示例：<header style="position: relative; height: 80px;"><img src="logo.png" style="max-width:90%"></header>
页头居中真正麻烦的从来不是“怎么写 CSS”，而是搞清谁在控制布局、谁被谁覆盖。尤其当页头混着导航、搜索框、响应式菜单时，一个 display: flex 就可能让前面所有居中尝试失效。动手前先用浏览器开发者工具点开页头元素，看一眼 computed styles 里的 display 和 position 值，比瞎试十次都管用。