双栏等高布局下，text-align和margin:auto失效，因grid/flex默认align-items:stretch强制子项拉伸，内容顶部对齐；需在栏目内用display:flex+justify-content:center+align-items:center实现真正居中。
双栏等高布局下，HTML元素居中不是靠 text-align 或 margin: auto 单独就能解决的——因为等高本身由容器强制拉伸导致子项“被撑开”，内部内容默认会顶部对齐，视觉上根本不在中间。
为什么 text-align:center 和 margin:auto 都失效
当用 display: grid 或 display: flex 实现双栏等高时，两栏高度由较高的一栏决定，但每栏内部仍是普通文档流。此时：
-
text-align: center只水平居中行内内容，对块级子元素（如div、h2）无效； -
margin: auto在块级元素上垂直方向不生效，除非该元素是 flex 子项或绝对定位； - 父容器设了
align-items: stretch（Grid/Flex 默认值），子项会被拉满高度，但没指定内部对齐方式，内容就卡在顶部。
grid 容器里让单栏内容真正居中
关键不是调子元素，而是控制该栏自身的对齐行为：
- 给文字所在的那一栏（比如
.text-col）加display: flex+flex-direction: column； - 再配
justify-content: center（垂直居中）和align-items: center（水平居中）； - 别忘了设
height: 100%或min-height: 100%，否则 flex 不知道“满高”是多少； - 如果该栏里有多个元素（如
h2+p），用gap: 1rem控制间距，比margin更稳定。
flex 双栏等高时右侧内容垂直居中总偏上
这是最常见的错觉：你以为右栏没居中，其实是它内部没设对齐，而左栏内容多、自然显高，衬得右栏“看起来矮”。解决方法很直接：
- 确保双栏都包裹在同一个
display: flex容器下，且设了align-items: stretch（默认就有）； - 右栏自身加
display: flex、flex-direction: column、justify-content: center； - 如果右栏含图片，记得加
object-fit: contain和max-width: 100%，否则图片撑高会导致 flex 计算错乱； - 避免在右栏里写
height: 100vh——它会覆盖 flex 的等高逻辑，造成两栏实际高度不一致。
IE11 兼容场景下怎么安全居中
Grid 在 IE11 中不支持 place-items，Flex 的 align-self 也常失效，只能靠老办法兜底：
- 用
display: table-cell+vertical-align: middle，但必须配合display: table父容器； - 父容器需设固定高度（比如
min-height: 300px），否则table-cell无法计算垂直居中基准； - 别混用
flex和table，IE11 对嵌套盒模型极其敏感，一个box-sizing没统一就会错位； - 真要兼容，建议整栏用
position: relative，内部元素用position: absolute; top: 50%; transform: translateY(-50%)——虽然不够语义化，但最稳。
最容易被忽略的是：等高布局本身不等于内容居中，它只解决“高度一致”，而居中永远发生在具体某一层容器内部。别指望靠外层 Grid/Flex 一条属性搞定所有层级的对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
