超链接居中需区分目标：文字居中用父容器text-align: center；整个链接块居中优先用Flex布局（justify-content/align-items）或绝对定位+transform，禁用废弃align属性。
超链接本身是行内元素，不能直接用 margin: 0 auto 居中；必须让它“能被居中”——也就是把它放进一个可控制的容器里，再对容器或其内容做处理。
给超链接的父容器加 text-align: center
这是最常用、兼容性最好、也最不容易出错的方式。适用于单个或多个超链接水平居中（比如导航栏、登录入口等）。
- 超链接（
<a>）默认是行内元素，所以它会响应父容器的text-align设置 - 只需给包裹它的块级容器（如
<div>、<p>、<header>）设置text-align: center - 不需要给
<a>自身设宽度或display，除非你想控制点击热区或加背景
<div style="text-align: center; padding: 20px;"> <a href="/login">立即登录</a> <a href="/register">免费注册</a> </div>
用 Flexbox 让超链接在容器中水平垂直居中
当你需要把一个超链接（比如一个大按钮式链接）精确放在整个视口或某个区域正中心时，Flexbox 是首选。
- 父容器必须有明确高度（比如
height: 100vh），否则align-items: center没效果 -
justify-content: center控制水平，align-items: center控制垂直 - 不用改
<a>的display，但建议加text-decoration: none和display: block（如果想让整块可点）
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;"> <a href="/home" style="text-decoration: none; padding: 12px 24px; background: #007bff; color: white;">首页</a> </div>
别踩 margin: 0 auto 的坑：它对 <a> 无效
很多人试过给 <a href="..."> 直接写 style="margin: 0 auto;"，结果完全没反应——因为 margin: auto 只对**块级元素且具有明确宽度**生效，而 <a> 默认不是块级，也没有宽度。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 强行加
display: block+width虽然能让margin: 0 auto生效，但属于绕远路，不如用text-align或 Flexbox - 如果用了
display: inline-block，再配margin: 0 auto依然无效——inline-block 元素不响应左右 auto margin - 绝对定位（
position: absolute）+transform: translate(-50%, -50%)可行，但要确保父容器是相对定位上下文，且会脱离文档流，影响后续布局
旧式 align="center" 属性已不推荐
HTML4 时代支持 <div align="center"> 或 <p align="center">，但它在 HTML5 中已被废弃，W3C 不再验证，现代浏览器虽仍兼容，但语义错误、维护性差、无法配合 CSS 媒体查询响应式调整。
- 不要写：
<div align="center"><a href="#">链接</a></div> - 应统一用 CSS 控制，保持结构与样式的分离
真正容易被忽略的是：居中目标到底是什么？是让“链接文字”在段落中居中，还是让“整个链接块”在页面中央？前者用 text-align，后者必须控制容器尺寸和布局上下文——混淆这两者，是绝大多数居中失败的根源。
