居中布局 10 种写法文字、图片、盒子全部覆盖居中是前端面试必考、工作必用的高频操作。但居中分三种对象、多种场景写法各不相同。本文一次性讲完10 种居中方案按场景分类直接复制能用。先搞清三种居中对象对象核心需求难度文字/行内内容水平居中⭐图片/行内块水平居中有时垂直⭐⭐盒子/块级元素水平 垂直都居中⭐⭐⭐10 种写法逐一来①text-align: center— 文字水平居中最经典适用 文字、行内元素、图片图片本质也是行内块css.parent { text-align: center; }htmldiv classparent p这段文字居中了/p img srccat.jpg alt图片也居中了 /div✅ 最简单、最常用。❌ 只管水平不管垂直。②margin: 0 auto— 块级元素水平居中适用 有固定宽度的盒子css.box { width: 400px; margin: 0 auto; }htmldiv classbox我是一个居中的盒子/div✅ 兼容所有浏览器不需要新特性。❌必须有宽度宽度用auto无效。只管水平。③Flexbox完美居中 — 水平 垂直首选方案适用 几乎所有居中场景文字、图片、盒子通吃css.parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 300px; }htmldiv classparent div我是盒子我居中了/div /div✅ 一行代码解决水平垂直子元素是什么都行。✅ 当前项目最推荐的方案。❌ IE10 以下不支持。④Grid居中 — 比 Flex 更短适用 同样通吃写法更少css.parent { display: grid; place-items: center; /* 水平垂直一步到位 */ height: 300px; }htmldiv classparent div我也居中了/div /div✅ 只需一行place-items: center。✅ Flex 和 Grid 都是现代方案选哪个都行。⑤line-height— 单行文字垂直居中适用 单行文字高度已知css.box { height: 50px; line-height: 50px; text-align: center; }htmldiv classbox单行文字垂直居中/div✅ 极简不需要任何新特性。❌多行文字会乱只适合单行。⑥padding撑开 — 盒子内部内容居中适用 不确定内容高度但希望内容在盒子内居中css.box { padding: 20px; text-align: center; }✅ 不需要知道内容多高。❌ 本质不是居中是留白。内容还是靠顶部对齐只是被撑开了。⑦position: absolute transform— 精准居中万能方案适用 任何情况下的水平垂直居中不依赖父元素css.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }htmldiv classparent styleposition: relative; height: 300px; div classchild我在正中间/div /div✅ 不需要知道子元素宽高也不需要父元素是 Flex/Grid。✅ 弹窗、浮层、Loading 图标最常用这个。❌ 父元素必须position: relative或其他非 static。⑧position: absolute inset: 0 margin: auto适用 已知宽高的盒子绝对定位居中css.child { position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; }✅ 写起来比 transform 更直观。❌ 必须知道宽高。⑨ 表格布局vertical-align: middle— 图片垂直居中适用 图片和文字并排图片垂直对齐css.parent { display: table-cell; vertical-align: middle; text-align: center; height: 200px; }htmldiv classparent img srccat.jpg alt图片垂直居中 /div✅ 兼容老浏览器。❌ 现在有 Flex这个写法基本可以退役了。⑩writing-mode— 竖排文字居中冷门但有用适用 中文竖排场景如古籍、书法展示页css.vertical-text { writing-mode: vertical-rl; text-align: center; height: 300px; line-height: 300px; }htmldiv classvertical-text竖排文字居中/div✅ 唯一能正确处理竖排居中的方案。❌ 极少用到但遇到就是救命。一张表总结该用哪个场景推荐方案备选文字/图片水平居中①text-align: center—有宽度的盒子水平居中②margin: 0 autoFlex盒子水平垂直居中③ Flex / ④ Grid⑦ transform单行文字垂直居中⑤line-heightFlex弹窗/浮层居中⑦transform⑧margin: auto竖排文字居中⑩writing-mode—老项目兼容② / ⑨—最后一句话日常开发记住 Flex 居中就够了。其他的知道在哪查就行。这 10 种够你覆盖所有居中场景。
居中布局 10 种写法：文字、图片、盒子全部覆盖
居中布局 10 种写法文字、图片、盒子全部覆盖居中是前端面试必考、工作必用的高频操作。但居中分三种对象、多种场景写法各不相同。本文一次性讲完10 种居中方案按场景分类直接复制能用。先搞清三种居中对象对象核心需求难度文字/行内内容水平居中⭐图片/行内块水平居中有时垂直⭐⭐盒子/块级元素水平 垂直都居中⭐⭐⭐10 种写法逐一来①text-align: center— 文字水平居中最经典适用 文字、行内元素、图片图片本质也是行内块css.parent { text-align: center; }htmldiv classparent p这段文字居中了/p img srccat.jpg alt图片也居中了 /div✅ 最简单、最常用。❌ 只管水平不管垂直。②margin: 0 auto— 块级元素水平居中适用 有固定宽度的盒子css.box { width: 400px; margin: 0 auto; }htmldiv classbox我是一个居中的盒子/div✅ 兼容所有浏览器不需要新特性。❌必须有宽度宽度用auto无效。只管水平。③Flexbox完美居中 — 水平 垂直首选方案适用 几乎所有居中场景文字、图片、盒子通吃css.parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 300px; }htmldiv classparent div我是盒子我居中了/div /div✅ 一行代码解决水平垂直子元素是什么都行。✅ 当前项目最推荐的方案。❌ IE10 以下不支持。④Grid居中 — 比 Flex 更短适用 同样通吃写法更少css.parent { display: grid; place-items: center; /* 水平垂直一步到位 */ height: 300px; }htmldiv classparent div我也居中了/div /div✅ 只需一行place-items: center。✅ Flex 和 Grid 都是现代方案选哪个都行。⑤line-height— 单行文字垂直居中适用 单行文字高度已知css.box { height: 50px; line-height: 50px; text-align: center; }htmldiv classbox单行文字垂直居中/div✅ 极简不需要任何新特性。❌多行文字会乱只适合单行。⑥padding撑开 — 盒子内部内容居中适用 不确定内容高度但希望内容在盒子内居中css.box { padding: 20px; text-align: center; }✅ 不需要知道内容多高。❌ 本质不是居中是留白。内容还是靠顶部对齐只是被撑开了。⑦position: absolute transform— 精准居中万能方案适用 任何情况下的水平垂直居中不依赖父元素css.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }htmldiv classparent styleposition: relative; height: 300px; div classchild我在正中间/div /div✅ 不需要知道子元素宽高也不需要父元素是 Flex/Grid。✅ 弹窗、浮层、Loading 图标最常用这个。❌ 父元素必须position: relative或其他非 static。⑧position: absolute inset: 0 margin: auto适用 已知宽高的盒子绝对定位居中css.child { position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; }✅ 写起来比 transform 更直观。❌ 必须知道宽高。⑨ 表格布局vertical-align: middle— 图片垂直居中适用 图片和文字并排图片垂直对齐css.parent { display: table-cell; vertical-align: middle; text-align: center; height: 200px; }htmldiv classparent img srccat.jpg alt图片垂直居中 /div✅ 兼容老浏览器。❌ 现在有 Flex这个写法基本可以退役了。⑩writing-mode— 竖排文字居中冷门但有用适用 中文竖排场景如古籍、书法展示页css.vertical-text { writing-mode: vertical-rl; text-align: center; height: 300px; line-height: 300px; }htmldiv classvertical-text竖排文字居中/div✅ 唯一能正确处理竖排居中的方案。❌ 极少用到但遇到就是救命。一张表总结该用哪个场景推荐方案备选文字/图片水平居中①text-align: center—有宽度的盒子水平居中②margin: 0 autoFlex盒子水平垂直居中③ Flex / ④ Grid⑦ transform单行文字垂直居中⑤line-heightFlex弹窗/浮层居中⑦transform⑧margin: auto竖排文字居中⑩writing-mode—老项目兼容② / ⑨—最后一句话日常开发记住 Flex 居中就够了。其他的知道在哪查就行。这 10 种够你覆盖所有居中场景。
