text-align: center对div没反应，因为它只作用于行内内容（文字、等），不控制块级子元素自身位置；要使子div水平居中，需设width再加margin: 0 auto，或用flex布局。

text-align: center 为什么对 div 没反应

因为 text-align: center 只作用于**行内内容**（文字、<img>、<span></span>），不是用来居中块级子元素的。给一个 <div> 直接加 <code>text-align: center，它内部的文字或图片会居中，但子 <div> 本身纹丝不动——它仍是块级元素，默认占满整行，左右没空间可“居中”。 <ul><li>想让子 <code><div> 水平居中：给它自己设 <code>width（比如 width: 60% 或 max-width: 400px），再加 margin: 0 auto

想让它的文字/图片居中：给它的父容器加 text-align: center

别在表格单元格（<td>）里删掉 <code>align="center" 就完事——<td> 默认是 <code>display: table-cell，text-align 对它依然有效

块级元素水平居中该用 margin: 0 auto 还是 flex？

两者都行，但适用场景不同：margin: 0 auto 更轻量、兼容性极好（IE6+），适合简单定宽容器；display: flex 更灵活，不依赖宽度，适合响应式或动态内容。

• margin: 0 auto 必须配合明确的 width 或 max-width，且不能是 100%（否则无剩余空间）
• 父容器不能是 display: flex 或 display: grid，否则 margin: auto 行为被覆盖
• display: flex; justify-content: center 对子元素类型无要求（<div>、<code><button></button>、<img> 都能居中），但会让所有直系子元素变成 Flex 项目，float 和传统 vertical-align 失效

  垂直居中为什么总“看不见效果”

  常见原因是父容器高度未显式定义。align-items: center 或 line-height 都需要一个可参照的高度，否则浏览器按内容撑开，上下留白被压缩为零。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • Flex 垂直居中必须确保父容器有高度：比如 height: 100vh、min-height: 200px，或已设 position: absolute 并配 top/bottom
  • 单行文字用 line-height 居中时，line-height 值必须等于容器 height，且容器不能有 padding 或 border 干扰计算
  • 绝对定位方案（top: 50%; left: 50%; transform: translate(-50%, -50%)）不依赖父容器高度，但父容器必须有 position: relative 提供定位上下文

  老项目批量替换 center 标签要注意什么

  真正卡住人的不是找不到 <center></center>，而是它常和 align="center"、valign="middle"、<font></font>、<u></u> 扎堆嵌套，一并删掉会直接破坏样式。

  • 先用正则全局搜：<center>[\s\S]*?</center>，再顺藤摸瓜查周围有没有表格属性或内联样式
  • 别无脑替成统一类名——标题居中该用 class="page-title"，弹窗内容该用独立 flex 容器，临时调试痕迹可用 utility class（如 u-text-center），但命名要统一
  • 如果 JS 里还写了 document.getElementsByTagName('center')，必须同步改脚本，否则运行时报 undefined
  实际替换时最容易忽略的是语义分层：这个居中是结构性需求（比如整个表单区域必须居中），还是视觉补丁（比如某段说明文字临时加个居中）——前者进 CSS 类体系，后者走 utility class，混在一起改只会让后续维护更难。