居中布局 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 种够你覆盖所有居中场景。

相关新闻

2026年广西柳州地下车库环氧地坪漆材料厂家价格大揭秘!

2026年广西柳州地下车库环氧地坪漆材料厂家价格大揭秘!

在广西柳州,地下车库环氧地坪漆的使用越来越广泛。它不仅能提升车库的整体美观度,还具有耐磨、防滑等诸多优点。对于众多有地坪漆需求的客户来说,2026年广西柳州地下车库环氧地坪漆材料厂家的价格是他们非常关心的问题。下面,我们…

2026/6/19 2:10:14阅读更多 →
如何构建自动驾驶多传感器标定系统:OpenCalib开源工具箱深度剖析

如何构建自动驾驶多传感器标定系统:OpenCalib开源工具箱深度剖析

如何构建自动驾驶多传感器标定系统:OpenCalib开源工具箱深度剖析 【免费下载链接】SensorsCalibration OpenCalib: A Multi-sensor Calibration Toolbox for Autonomous Driving 项目地址: https://gitcode.com/gh_mirrors/se/SensorsCalibration 在自动驾驶…

2026/6/19 2:10:14阅读更多 →
重庆思庄技术分享——统信uos20 普通用户执行crontab -l报权限错

重庆思庄技术分享——统信uos20 普通用户执行crontab -l报权限错

统信uos20 普通用户执行crontab -l报权限错现象: [kingbasenode1 ~]$ crontab -l -bash: /usr/bin/crontab: 权限不够检查[kingbasenode1 ~]$ ls -ltr /usr/bin/crontab -rwxr--r-- 1 root root 55960 3月 13 2023 /usr/bin/crontab

2026/6/19 2:05:13阅读更多 →
终极指南:3种创新方法解决小爱音箱音乐服务DID配置难题

终极指南:3种创新方法解决小爱音箱音乐服务DID配置难题

终极指南:3种创新方法解决小爱音箱音乐服务DID配置难题 【免费下载链接】xiaomusic 使用小爱音箱播放音乐,音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 小爱音箱音乐服务(xiaomusic&#xf…

2026/6/19 3:35:18阅读更多 →
FitGirl游戏启动器:告别杂乱游戏库,打造你的专属游戏管理中心 [特殊字符]

FitGirl游戏启动器:告别杂乱游戏库,打造你的专属游戏管理中心 [特殊字符]

FitGirl游戏启动器:告别杂乱游戏库,打造你的专属游戏管理中心 🎮 【免费下载链接】Fitgirl-Repack-Launcher An Electron launcher designed specifically for FitGirl Repacks, utilizing pure vanilla JavaScript, HTML, and CSS for optim…

2026/6/19 3:35:18阅读更多 →
Microchip 24AA32A/24LC32A EEPROM选型、封装与I2C实战指南

Microchip 24AA32A/24LC32A EEPROM选型、封装与I2C实战指南

1. 项目概述:为什么需要一份详尽的EEPROM选型指南?在嵌入式开发或者硬件设计项目中,存储一小块掉电不丢失的数据是再常见不过的需求。无论是保存设备的校准参数、运行日志、用户配置,还是作为一个小型的数据缓存,串行E…

2026/6/19 3:35:18阅读更多 →
PS501单芯片可重编程BMS方案:架构、设计与实战解析

PS501单芯片可重编程BMS方案:架构、设计与实战解析

1. 项目概述:为什么PS501值得你花时间研究?如果你正在设计一个需要电池供电的设备,无论是消费电子、电动工具还是储能系统,那么“电池管理”这四个字绝对是你绕不开的核心课题。传统的电池管理方案,往往由一颗主控MCU搭…

2026/6/19 3:35:18阅读更多 →
本周概览 {{date:gggg年[第]ww周}}

本周概览 {{date:gggg年[第]ww周}}

本周概览 {{date:gggg年[第]ww周}} 【免费下载链接】obsidian-calendar-plugin Simple calendar widget for Obsidian. 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-calendar-plugin 本周目标 主要目标1 主要目标2 每日记录 ![[{{sunday:gggg-MM-DD}}]] ![…

2026/6/19 3:35:18阅读更多 →
免费音频频谱分析工具Spek:3分钟掌握音频可视化的终极指南

免费音频频谱分析工具Spek:3分钟掌握音频可视化的终极指南

免费音频频谱分析工具Spek:3分钟掌握音频可视化的终极指南 【免费下载链接】spek Acoustic spectrum analyser 项目地址: https://gitcode.com/gh_mirrors/sp/spek 你是否曾经好奇音乐文件里隐藏着什么秘密?想了解为什么有些音频听起来清晰明亮&a…

2026/6/19 3:30:18阅读更多 →
Photobucket付费墙背后:5美元买童年回忆却落得一场空!

Photobucket付费墙背后:5美元买童年回忆却落得一场空!

1. 付费墙初现如今身处万亿市值公司林立的时代,我们也不能轻易放弃5美元。就像Photobucket,它曾相当于过去的Imgur,我们小时候常把图片上传到这个网站,然后在各种论坛上分享链接,它简单好用,尽职尽责。但最…

2026/6/19 0:04:37阅读更多 →
如何在5分钟内掌握Mermaid Live Editor:实时图表编辑终极指南

如何在5分钟内掌握Mermaid Live Editor:实时图表编辑终极指南

如何在5分钟内掌握Mermaid Live Editor:实时图表编辑终极指南 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live…

2026/6/19 0:04:37阅读更多 →
yuzu模拟器内存修改技术深度解析:金手指功能实现原理与实践指南

yuzu模拟器内存修改技术深度解析:金手指功能实现原理与实践指南

yuzu模拟器内存修改技术深度解析:金手指功能实现原理与实践指南 【免费下载链接】yuzu 项目地址: https://gitcode.com/GitHub_Trending/yuz/yuzu yuzu作为目前最流行的开源Nintendo Switch模拟器,不仅提供了完整的游戏运行环境,还内…

2026/6/19 0:04:37阅读更多 →