写了个登录框，宽 400 像素，怎么调都贴着左边。margin 明明写了 auto，开发者工具一开才发现，盒子根本没设宽度，宽度是满的，auto 自然没处可居中。

水平居中，先给宽度

块级元素靠 margin: 0 auto 居中，前提是有确定的宽度。width: 400px 或者 max-width: 400px 都行。父容器是 flex 的话，一句 justify-content: center 就够，连宽度都不用管。

.box { width: 400px; margin: 0 auto; }

垂直居中卡在父元素高度

很多人写 align-items: center 没反应，原因是父容器的高度就等于内容高度，居中前后长得一样。给父级补上 min-height: 100vh，效果立马出来。html 和 body 的默认高度由内容撑开，不是视口高度，这点最容易忘。

.wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

grid 更省事，两行结束：display: grid 配 place-items: center，水平垂直一起解决，元素多宽多高都不影响。

绝对定位那套还能用

父级 position: relative，子元素 left 50%、top 50%，再 transform: translate(-50%, -50%)。老项目里到处都是，缺点是 transform 会给内部元素的定位和某些动画带来麻烦，能换 flex 就换。

不生效的几个常见原因

  • text-align: center 只管行内内容，对块级盒子没有任何作用。
  • 元素本身是 inline 或 inline-block，margin auto 不起作用。
  • 父容器设了 float，或者宽度是 0，子元素再居中也没意义。
  • 样式被后面的规则覆盖，控制台里那一行会被划掉，点开看来源。

登录框这类场景，我一般直接上 flex 加 min-height: 100vh，兼容性和可读性都够。遇到居中失效，先查父级高度，再查元素宽度，九成问题都在这两处。