核心结论：div 居中分水平居中、垂直居中、水平垂直同时居中三种需求，现在前端最推荐 Flex 弹性布局写法，代码简单兼容性好，不需要计算固定宽度，老项目还可以使用 margin auto、绝对定位方案。
方案一 Flex 布局 推荐 水平垂直居中
父容器开启 flex，同时设置水平和垂直居中属性
.parent {
display: flex;
justify-content: center; / 水平居中 /
align-items: center; / 垂直居中 /
height: 100vh; / 父容器需要有高度，否则垂直居中不生效 /
}
适用场景：绝大多数现代网页项目，不需要知道子 div 固定宽高，灵活好用
方案二 只做水平居中 margin auto
.box {
width: 400px; / 必须设置固定宽度 /
margin: 0 auto;
}
原理：左右外边距自动平分剩余空间，缺点是必须写固定宽度，不能垂直居中
方案三 绝对定位加 transform 水平垂直居中
.parent {
position: relative;
height: 100vh;
}
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
优点：不需要写子 div 宽高，老浏览器兼容性不错，很多老项目在用
方案四 Grid 布局 水平垂直居中
.parent {
display: grid;
place-items: center;
height: 100vh;
}
代码最短，一行 place-items 同时完成水平垂直居中，适合新项目
方案对比表
| 方案 | 是否需要固定宽高 | 垂直居中 | 水平居中 | 推荐度 |
|---|---|---|---|---|
| Flex | 不需要 | 支持 | 支持 | 最高 |
| margin auto | 需要宽度 | 不支持 | 支持 | 一般 |
| 绝对定位 transform | 不需要 | 支持 | 支持 | 高 |
| Grid | 不需要 | 支持 | 支持 | 高 |
常见踩坑点
第一，垂直居中不生效，大多是父元素没有设置高度，flex 和 grid 方案父容器必须拥有明确高度
第二，margin auto 只对块级元素生效，行内元素不能用这个办法水平居中
第三，绝对定位方案，父元素一定要加 position relative，不然 div 会相对于 body 定位
FAQ
问题 1 CSS 怎样让一个 div 居中最简单写法是什么
回答 1 CSS 怎样让一个 div 居中，首选 Flex 写法，CSS 怎样让一个 div 居中只需要父元素 display flex 加上 justify-content 和 align-items，代码简洁好维护。
问题 2 CSS 怎样让一个 div 居中只水平居中怎么做
回答 1 CSS 怎样让一个 div 居中只水平居中，给 div 设置宽度再加 margin 0 auto，CSS 怎样让一个 div 居中这个是经典老写法。
问题 3 CSS 怎样让一个 div 居中为什么垂直居中没有效果
回答 1 CSS 怎样让一个 div 居中垂直居中失效，基本是父容器没有高度，CSS 怎样让一个 div 居中给父容器加上 height 就可以正常居中。
问题 4 CSS 怎样让一个 div 居中 transform 方案有什么缺点
回答 1 CSS 怎样让一个 div 居中 transform 方案在很老版本浏览器支持有限，CSS 怎样让一个 div 居中现在新项目优先选择 Flex。
免责声明
本文为前端基础 CSS 技术科普，不同浏览器对属性支持存在差异，正式项目建议做好兼容性测试，不构成强制选型要求。
