CSS 中实现 div 居中有以下几种常用方法
在 CSS 中实现 div 居中有以下几种常用方法，具体取决于需要 水平居中、垂直居中 还是 两者兼具。以下是详细解决方案：
目录
一、水平居中（Horizontal Centering）
1. 行内块元素（Inline-Block）
2. 固定宽度 + margin: auto
3. Flexbox 弹性布局
二、垂直居中（Vertical Centering）
1. 绝对定位 + 变换（Transform）
2. Flexbox 弹性布局
3. Grid 网格布局
三、水平 + 垂直双居中（Perfect Center）
1. Flexbox（推荐）
2. Grid 网格布局
3. 绝对定位 + 变换
四、其他场景
1. 行内元素（Text/Inline）居中
2. 多行文本垂直居中
关键点总结
一、水平居中（Horizontal Centering）
1. 行内块元素（Inline-Block）
css
.parent {text-align: center; /* 父容器设置 */
}
.child {display: inline-block; /* 子元素转为行内块 */
}2. 固定宽度 + margin: auto
css
.child {width: 300px;margin: 0 auto; /* 左右外边距自动分配 */
}3. Flexbox 弹性布局
css
.parent {display: flex;justify-content: center; /* 水平居中 */
}二、垂直居中（Vertical Centering）
1. 绝对定位 + 变换（Transform）
css
.parent {position: relative; /* 父容器相对定位 */
}
.child {position: absolute;top: 50%;transform: translateY(-50%); /* 上移自身高度的50% */
}2. Flexbox 弹性布局
css
.parent {display: flex;align-items: center; /* 垂直居中 */
}3. Grid 网格布局
css
.parent {display: grid;place-items: center; /* 垂直水平居中 */
}三、水平 + 垂直双居中（Perfect Center）
1. Flexbox（推荐）
css
.parent {display: flex;justify-content: center; /* 水平 */align-items: center; /* 垂直 */height: 100vh; /* 父容器需有高度 */
}2. Grid 网格布局
css
.parent {display: grid;place-items: center; /* 一步到位 */height: 100vh;
}3. 绝对定位 + 变换
css
.parent {position: relative;height: 100vh;
}
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 上移左移自身尺寸的50% */
}四、其他场景
1. 行内元素（Text/Inline）居中
css
.parent {text-align: center; /* 直接继承 */
}2. 多行文本垂直居中
css
.parent {display: flex;align-items: center;line-height: 1.5; /* 与容器高度一致 */
}关键点总结
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
margin: auto | 固定宽度元素水平居中 | 简单 | 需明确宽度 |
| Flexbox | 现代布局，支持动态尺寸 | 灵活，代码简洁 | 兼容性（IE10+） |
| Grid | 二维布局，一步到位 | 强大，适合复杂设计 | 兼容性（IE不支持） |
| 绝对定位 + 变换 | 未知尺寸元素居中 | 无需固定尺寸 | 需父容器定位 |
推荐优先使用 Flexbox 或 Grid，它们更符合现代 Web 开发需求，且代码简洁易维护。