CSS 布局 – 水平 & 垂直对齐
在 CSS 布局中，实现水平对齐和垂直对齐是网页排版的核心技能之一。下面是对 CSS 中常见的水平和垂直对齐方式的中文讲解，包括传统方法与现代布局（Flex 和 Grid）方法。
✅ 一、常见对齐需求举例
| 需求 | 目标说明 |
|---|---|
| 文本水平居中 | p 或 h1 中的文字居中 |
| 块元素水平居中 | 一个 div 居中显示 |
| 元素在容器中水平 + 垂直居中 | 内容在整个盒子正中间（经典场景） |
| 多个元素横向居中对齐 | 导航栏、按钮组等 |
| 垂直居中（任意高度） | 比如卡片内图文垂直居中 |
✅ 二、文字水平居中
📌 方法：text-align: center
p {
text-align: center;
}
📎 说明：只对行内元素或行内内容生效，如文字、图片、span 等。
✅ 三、块级元素水平居中
📌 方法：设置左右 margin: auto（常用于定宽元素）
.box {
width: 300px;
margin: 0 auto;
}
📎 注意：必须设置 width 才能让 margin: auto 有作用！
✅ 四、水平 + 垂直居中（经典内容居中）
✅ 方法 1：Flex 布局（推荐！）
.center-box {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
适用于：
- 单个元素/文本垂直水平居中
- 卡片布局、按钮居中等场景
💡 可配合设置
height、min-height确保容器有高度
✅ 方法 2：Grid 布局
.center-box {
display: grid;
place-items: center; /* 水平 + 垂直同时居中 */
}
简洁好用，Grid 的 place-items 是 justify-items + align-items 的合体。
✅ 方法 3：定位 + transform
.center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
适合弹窗等“固定位置居中”场景，缺点是脱离文档流。
✅ 五、多个元素水平居中（按钮组、导航等）
✅ 方法：Flex 布局 + justify-content: center
.nav {
display: flex;
justify-content: center;
}
子元素会横向排列并居中，非常适合按钮组、菜单栏等。
✅ 六、行内元素垂直居中
📌 方法：line-height 与元素高度一致
span {
height: 40px;
line-height: 40px;
}
仅适用于单行文本垂直居中，多行会错位。
✅ 七、任意元素垂直居中（传统技巧）
📌 方法：表格布局（老派技巧）
.container {
display: table;
height: 300px;
}
.inner {
display: table-cell;
vertical-align: middle;
}
兼容性好，但不如 Flex 简洁，已逐渐被淘汰。
✅ 八、总结对比表
| 对齐方式 | 方法 | 是否推荐 | 说明 |
|---|---|---|---|
| 文本水平居中 | text-align: center | ✅ | 简单有效 |
| 块水平居中 | margin: 0 auto | ✅ | 需要设置宽度 |
| 垂直居中（现代） | flex + align-items: center | ✅✅✅ | 推荐使用，通用简洁 |
| 水平 + 垂直居中 | flex + justify/align | ✅✅✅ | 最推荐 |
| 传统垂直居中 | table + table-cell | ⚠️ 一般 | 兼容性好但冗长，不推荐新项目使用 |
| 定位居中 | absolute + transform | ✅ | 对弹窗等定位元素有用 |
| Grid 居中 | display: grid; place-items: center | ✅✅ | 新手也易懂 |
✅ 九、示例：内容完全居中
<div class="container">
<div class="center">我是正中间的内容</div>
</div>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 全屏高度 */
}
</style>
如你希望我提供特定布局（如三栏、中间固定两边自适应、图片垂直居中等）也可以继续告诉我，我可以现场给你写代码 ✅