使用 Flexbox、绝对定位+transform、Grid 或 text-align/line-height 可实现居中。1. Flexbox 最推荐，父容器设 display: flex，justify-content: center 和 align-items: center；2. 绝对定位配合 top: 50%、left: 50% 与 transform: translate(-50%, -50%) 兼容性好；3. Grid 布局用 place-items: center 简洁高效；4. 文本居中可结合 text-align 与 line-height，多行文本建议用 Flexbox。注意父元素需有高度，避免失效。
让元素在父容器中垂直和水平居中，是CSS布局中的常见需求。实现方式多样，选择哪种取决于元素类型、是否固定尺寸、浏览器兼容性要求等。以下是几种实用且广泛使用的方案。
1. 使用 Flexbox（推荐）
Flexbox 是现代布局的首选方法，语法简洁，兼容主流浏览器。
只需在父容器上设置 display: flex，并使用 justify-content 和 align-items 即可实现居中。
justify-content: center —— 水平居中align-items: center —— 垂直居中
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent { display: flex; justify-content: center; align-items: center; height: 100vh; /* 确保有高度 */}.child { /* 子元素无需特殊设置 */}
适用于块级、行内块、图片、文字等各种子元素，支持动态尺寸。
2. 使用绝对定位 + transform
当无法使用 Flexbox 时（如需要兼容老版本IE），可用此方法。
通过 position: absolute 将元素脱离文档流，再用 top: 50% 和 left: 50% 移动到中心附近，最后用 transform: translate(-50%, -50%) 反向偏移自身宽高的一半。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent { position: relative; height: 100vh;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
优点：兼容性好，适用于固定或不定尺寸元素。
注意：父元素必须有 position: relative 或其他定位上下文。
Seede AI
AI 驱动的设计工具
586 查看详情
3. 使用 Grid 布局
CSS Grid 提供了另一种现代解决方案，尤其适合复杂布局场景下的居中。
设置父容器为网格容器，并使用 place-items: center 可一键居中所有子项。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent { display: grid; place-items: center; height: 100vh;}
或者单独控制：
.parent { display: grid; justify-items: center; align-items: center;}
Grid 方法语义清晰，适合与其它网格功能结合使用。
4. 文字或行内元素的居中
对于纯文本或行内元素，可通过以下方式实现：
水平居中：text-align: center 在父元素上设置垂直居中：line-height 等于容器高度（适用于单行文本）
示例：
.parent { text-align: center; line-height: 200px; /* 与 height 一致 */ height: 200px;}.child { display: inline-block; vertical-align: middle; line-height: normal; /* 恢复子元素行高 */}
若有多行文本垂直居中，建议改用 Flexbox 更可靠。
基本上就这些常用方法。根据项目环境选择最合适的一种即可。Flexbox 最通用，推荐优先掌握。不复杂但容易忽略细节，比如父元素高度缺失会导致居中失效，记得检查基础结构。
以上就是制作css垂直和水平居中布局的实战方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1064278.html
微信扫一扫 
支付宝扫一扫 
