Flexbox (现代、推荐)
这是目前最流行、最灵活、也最推荐的方法，它利用了 CSS 弹性盒子布局，可以轻松实现各种居中效果。
（图片来源网络，侵删）
水平垂直居中 (最常用)
这种方法适用于让一个 div 在其父容器中同时水平和垂直居中。
HTML 结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Flexbox 居中</title>
<style>
/* 1. 设置父容器 */
.parent {
width: 100vw; /* 视口宽度 */
height: 100vh; /* 视口高度 */
background-color: #f0f0f0;
/* 2. 关键 Flexbox 属性 */
display: flex;
justify-content: center; /* 水平居中 (主轴) */
align-items: center; /* 垂直居中 (交叉轴) */
}
/* 3. 设置要居中的子 div */
.child {
width: 300px;
height: 150px;
background-color: #007bff;
color: white;
text-align: center;
line-height: 150px; /* 使文字也垂直居中 */
border-radius: 8px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
我是一个居中的 Div
</div>
</div>
</body>
</html>
代码解析:
.parent: 设置父容器，为了演示全屏居中，我们让它占满整个视口 (100vw,100vh)。display: flex;: 将父容器声明为一个 Flex 容器。justify-content: center;: 在主轴（默认为水平方向）上将子元素居中对齐。align-items: center;: 在交叉轴（默认为垂直方向）上将子元素居中对齐。
优点:
（图片来源网络，侵删）
- 代码简洁: 只需几行 CSS 即可。
- 灵活性高: 可以轻松处理不同尺寸的子元素，也能轻松实现仅水平居中 (
justify-content: center;) 或仅垂直居中 (align-items: center;)。 - 兼容性好: 所有现代浏览器都完美支持。
Flexbox (不定宽高元素居中)
如果子元素的内容是动态的,宽高不确定，上面的方法依然完美有效，这正是 Flexbox 的强大之处。
Grid (现代、同样强大)
CSS Grid 布局是另一个非常现代和强大的布局工具，实现居中同样非常简单。
HTML 结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Grid 居中</title>
<style>
/* 1. 设置父容器 */
.parent {
width: 100vw;
height: 100vh;
background-color: #e9ecef;
/* 2. 关键 Grid 属性 */
display: grid;
/* 将子元素放置在网格的中央 */
place-items: center; /* 是 align-items: center; 和 justify-items: center; 的简写 */
}
.child {
width: 300px;
height: 150px;
background-color: #28a745;
color: white;
text-align: center;
line-height: 150px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
我是用 Grid 居中的 Div
</div>
</div>
</body>
</html>
代码解析:
（图片来源网络，侵删）
.parent: 设置父容器。display: grid;: 将父容器声明为一个 Grid 容器。place-items: center;: 这是一个非常方便的简写属性，它同时设置了align-items(交叉轴对齐) 和justify-items(主轴对齐) 为center，从而让子元素在网格单元格内完美居中。
优点:
- 代码同样简洁:
place-items: center;一行搞定。 - 二维布局: Grid 除了居中，更擅长处理二维布局（行和列），功能非常强大。
- 兼容性好: 所有现代浏览器都完美支持。
margin: auto (经典、简单)
这种方法适用于已知子元素宽高的水平垂直居中，它需要父元素是 position: relative，子元素是 position: absolute。
HTML 结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Margin Auto 居中</title>
<style>
/* 1. 设置父容器 */
.parent {
width: 100vw;
height: 100vh;
background-color: #dc3545;
/* 2. 关键属性：相对定位 */
position: relative;
}
/* 3. 设置子 div */
.child {
width: 300px;
height: 150px;
background-color: #fff;
color: #333;
text-align: center;
line-height: 150px;
border-radius: 8px;
/* 3. 关键属性：绝对定位 + margin auto */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
我是用 Margin Auto 居中的 Div
</div>
</div>
</body>
</html>
代码解析:
.parent: 设置为position: relative;，为子元素的绝对定位提供一个参考系。.child:- 设置为
position: absolute;，使其脱离正常文档流，可以通过top,left,right,bottom来定位。 - 将
top,left,right,bottom都设置为0，这会将子元素的四个边界都“粘”到父元素的边界上。 - 设置
margin: auto;，浏览器会自动分配剩余的空间，使margin在四个方向上都相等，从而达到完美的居中效果。
- 设置为
优点:
- 兼容性极好: 这是 CSS2 的技术，在所有浏览器中都能工作，包括非常古老的版本。
- 概念清晰: 对于理解 CSS 定位模型很有帮助。
缺点:
- 必须知道子元素尺寸: 如果子元素的宽高是动态的或不固定，这种方法可能会失效。
- 代码稍多: 相比 Flexbox 和 Grid，需要写更多的 CSS 属性。
transform: translate() (灵活、现代)
这种方法结合了绝对定位和 transform 属性，不需要知道子元素的宽高，非常灵活。
HTML 结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Transform 居中</title>
<style>
/* 1. 设置父容器 */
.parent {
width: 100vw;
height: 100vh;
background-color: #6f42c1;
/* 2. 关键属性：相对定位 */
position: relative;
}
/* 3. 设置子 div */
.child {
width: 300px;
height: 150px;
background-color: #fff;
color: #333;
text-align: center;
line-height: 150px;
border-radius: 8px;
/* 3. 关键属性：绝对定位 + transform */
position: absolute;
top: 50%; /* 先垂直移动到父容器中间 */
left: 50%; /* 再水平移动到父容器中间 */
/* 然后通过 transform 向上和向左平移自身宽高的一半 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
我是用 Transform 居中的 Div
</div>
</div>
</body>
</html>
代码解析:
.parent: 同样设置为position: relative;。.child:position: absolute;和top: 50%;、left: 50%;会将子元素的左上角移动到父容器的正中心。transform: translate(-50%, -50%);的作用是，将子元素向左（X轴）和向上（Y轴）平移其自身宽度和高度的 50%，这样，子元素的中心点就正好对准了父容器的中心点。
优点:
- 不需要知道宽高: 即使内容是动态的，也能完美居中。
- 性能较好:
transform属性通常由 GPU 加速，性能比修改margin或top/left更好。 - 兼容性好: 在所有现代浏览器中都表现良好。
缺点:
- 代码稍多: 需要组合多个属性。
总结与如何选择
| 方法 | 优点 | 缺点 | 推荐场景 |
|---|---|---|---|
| Flexbox | 代码简洁、灵活、强大 | 无明显缺点 | 首选方案，几乎所有现代布局需求的首选，特别是当需要在一维方向（行或列）上对齐元素时。 |
| Grid | 代码简洁、二维布局王者 | 无明显缺点 | 首选方案，当处理二维布局（表格状布局）时，比 Flexbox 更直观，居中同样简单。 |
margin: auto |
兼容性极好、概念经典 | 必须知道子元素尺寸 | 需要兼容非常古老的浏览器，且子元素尺寸固定时。 |
transform |
无需知道尺寸、性能好 | 代码稍多 | 当使用绝对定位，且子元素尺寸不固定时的一个绝佳选择。 |
最终建议：
- 从今天起，优先学习和使用 Flexbox 和 Grid。 它们是现代 Web 开发的标准，能让你的布局代码更清晰、更易维护。
- 如果只是简单的水平居中,Flexbox 的
justify-content: center;是最简单的。 - 如果是同时水平和垂直居中,Flexbox 的
justify-content + align-items和 Grid 的place-items是最优雅的解决方案。
