单行文字垂直居中最直接的方法是设置line-height等于容器height并配合text-align: center；需满足容器高度固定、内容严格单行、无内联元素干扰，多行或动态内容必须改用flex等方案。
单行文字垂直居中，用 text-align: center + line-height 等于容器高度最直接；多行或动态内容必须换方案，否则文字会被截断或错位。
单行文本：用 line-height 匹配容器高度
这是最轻量、兼容性最好的方式，但前提非常明确：容器高度固定、内容只有一行、不包含图片或内联块元素。
-
line-height必须和容器的height数值完全一致（单位也要一致，比如都是px） - 如果容器用了
em或rem单位，line-height用无单位数值更安全（如line-height: 2;），但此时无法保证绝对垂直居中 - 父容器不能是
display: inline或未设height的span——它得是个有明确高度的块级上下文 - 常见翻车点：
overflow: hidden没加，导致文字撑高容器后溢出；或者字体加载后字号变化，line-height失效
示例：
div {
height: 48px;
line-height: 48px;
text-align: center;
border: 1px solid #ccc;
}
多行或不定高文字：必须用 display: flex
Flex 是目前唯一能天然适配多行、换行、响应式字号、甚至混合图标+文字的可靠方案。IE11 支持良好，现代项目可放心用。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 父容器加
display: flex后，justify-content: center控制水平，align-items: center控制垂直 - 不需要设置子元素宽高，也不依赖
line-height或定位偏移 - 注意：如果子元素是
span且没设display: block，换行可能被忽略——建议显式声明display: inline-block或block - 在
min-height容器里，IE11 有时会忽略align-items: center，可临时补height: 100%或改用 Grid
示例：
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
border: 1px solid #ddd;
}
需要兼容 IE9/10？用 position: absolute + transform
这个组合至今仍有效，但容易漏关键步骤，一漏就偏移一半自身尺寸而不是容器中心。
- 父容器必须有
position: relative（或其它非static定位）作为定位上下文 - 子元素设
position: absolute; top: 50%; left: 50%，再加transform: translate(-50%, -50%)——三者缺一不可 - 不要混用
margin: auto，它在绝对定位下行为不稳定，尤其在 Safari 旧版中 - 如果文字字号随视口缩放（如用
vw），transform依然生效；但频繁触发重排会影响滚动性能
示例：
.parent { position: relative; height: 200px; }
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
真正难的不是选哪种方法，而是判断当前场景是否满足某方法的前提条件——比如以为 line-height 能撑多行，结果第二行直接掉出容器底部；或者在 Flex 容器里还写 vertical-align: middle，后者根本不起作用。
