最直接办法是将超链接放入有明确宽度的块级容器（如），并对该容器设置text-align: center；不能只给加该属性，因其非块级元素。
用 text-align: center 直接包裹超链接
表单下方的超链接要居中，最直接的办法是把 <a></a> 标签放在一个有明确宽度的块级容器里，并对这个容器设置 text-align: center。注意：不能只给 <a></a> 自身加 text-align（它不是块级元素，该属性无效）。
常见错误是给 <a></a> 加 display: block 后再加 margin: 0 auto——这也能居中，但多了一步且容易漏掉 width 或触发意外换行；text-align 更轻量、更符合语义。
- 确保父容器是块级元素（如
<div>、<code><p></p>、<footer></footer>），且未被浮动或绝对定位干扰 - 如果父容器内还有其它内容（比如提示文字），
text-align: center会一并居中，需留意布局意图 - 避免在表单
<form></form>标签上直接设text-align: center，否则所有内部行内元素（按钮、文字等）都会被居中，可能破坏原有排版
用 flex 布局精准控制（推荐用于现代项目）
如果表单结构较复杂，或需要响应式适配，用 display: flex 更可靠。关键是把超链接的直接父容器设为 flex，并用 justify-content: center。
注意：不要在 <form></form> 上直接加 display: flex，否则整个表单子元素会变成一行排列，破坏语义流。应该额外包一层 <div class="form-footer"> 之类。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>示例结构：<pre class='brush:php;toolbar:false;'><form>
<!-- 表单字段 -->
<div class="form-footer">
<a href="/forgot">忘记密码？</a>
</div>
</form></pre></li>
<li>CSS 写法：<pre class='brush:php;toolbar:false;'>.form-footer {
display: flex;
justify-content: center;
margin-top: 1rem;
}</pre></li>
<li>Flex 方案天然支持垂直居中（加 <code>align-items: center），也方便后续加图标、分隔线等扩展
避免踩这些坑
实际调试时，居中失效往往不是写法错，而是被其它样式覆盖或结构干扰。
- 检查是否误用了
float: left/right—— 浮动元素会脱离文档流，text-align对它无效 - 确认没有全局重置样式（如某些 CSS 框架）把
<a></a>设成了display: inline-block并加了vertical-align: top，导致基线对齐异常 - 如果超链接在
<button></button>或<input type="submit">同一行，浏览器默认会按行内元素基线对齐，视觉上“偏高”，此时用 flex 更可控 - IE10 及以下不支持 flex，若需兼容，退回
text-align+ 包裹<div> 是更稳妥的选择<h3>响应式下要不要加 media query？</h3> <p>纯居中行为本身不需要媒体查询——<code>text-align: center和 flex 的justify-content都是流式响应的。但如果你在小屏上想让链接独占一行、加大间距，或改成左对齐（比如配合底部导航），那就需要加断点。- 例如移动端左对齐：
@media (max-width: 480px) { .form-footer { justify-content: flex-start; } } - 关键判断点：不是“要不要居中”，而是“不同视口下用户是否还期望它居中”——通常表单页在手机上仍保持居中更一致
实际项目里，
text-align方案够用就别硬上 flex；但只要支持现代浏览器，flex 的可维护性和扩展性明显更好。最常被忽略的是父容器的语义包裹——别图省事直接往<form></form>里塞样式，多一层<div> 能省掉大半调试时间。</div> - 例如移动端左对齐：
