### [页眉 logo 水平居中的三种实现](https://www.huociguo.com/article/1858)

**Published:** 2026-10-04T03:22:49

**Author:** 米了

**Excerpt:** 🎯 页眉里的 logo 要水平居中，看着简单，写法却分几派。按场景挑一种即可。步骤一，文本类 logo 用 。…

🎯 页眉里的 logo 要水平居中，看着简单，写法却分几派。按场景挑一种即可。

步骤一，文本类 logo 用 `text-align:center`。给页眉容器设 `text-align:center`，内部行内元素自动居中，兼容最好。

![页眉排版示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-17279853.jpeg)

页眉区域，logo 居中更稳重

步骤二，flex 布局用 `justify-content:center`。页眉设为 `display:flex` 后，主轴上靠 `justify-content:center` 居中，还能顺带处理左右两侧元素。

步骤三，块级元素用 `margin:0 auto`。logo 是块级且设了宽度，给 `margin-left/right:auto` 即水平居中，需显式 `display:block`。

⚠️ 别混用：flex 容器里再写 `text-align:center` 对子项无效，居中要靠 justify-content。可访问性上，页眉 logo 建议包在 `<a>` 并带可识别文本。

其余情况，多元素页眉优先 flex，单 logo 用 text-align 最省事。

**Tags:** flex 居中, logo 水平居中, text-align center, 页眉居中, 页眉布局

**Categories:** HTML5

---