【CSS进阶】CSS元素的程度、垂直居中方法

在前端开发中，实现 程度居中 和 垂直居中 是常见的需求。差别的 HTML 元素（块级元素、行内元素、行内块元素）以及差别的布局方式（传统布局、Flexbox、Grid、绝对定位）会有差别的居中方法。以下是各类居中方式的总结：

---

1. 程度居中（Horizontal Centering）

1.1 图片程度居中

方法 1：background-position

当使用 background-image 设置配景图片时，可以通过 background-position 来实现程度居中：

1. .box {
2.     width: 100%;
3.     height: 500px;
4.     background: url('image.jpg') no-repeat;
5.     background-position: center top; /* 水平居中 */
6.     background-size: cover;
7. }

复制代码

适用场景：适用于 配景图片 的居中。

---

1.2 块级元素程度居中

方法 1：margin: 0 auto

块级元素可以使用 margin: 0 auto; 举行程度居中（前提是必须指定 width）：

1. .box {
2.     width: 300px;
3.     margin: 0 auto;
4.     background-color: lightblue;
5. }

复制代码

适用场景：适用于 固定宽度的块级元素（如 div）。

---

1.3 行内元素 & 行内块元素程度居中

方法 1：text-align: center

将 text-align: center 设置到父级元素上，使子元素（行内、行内块）在父级中程度居中：

1. .container {
2.     text-align: center;
3. }
5. span, img {
6.     display: inline-block; /* 行内元素或行内块元素 */
7. }

复制代码

适用场景：

• 适用于 文本、行内块元素（如 img）的程度居中。
  

---

2. 垂直居中（Vertical Centering）

2.1 行内元素 & 行内块元素垂直居中

方法 1：line-height

当行内文本的 line-height 等于容器的 height 时，可以实现垂直居中：

1. .box {
2.     height: 100px;
3.     line-height: 100px;
4.     text-align: center;
5. }

复制代码

适用场景：

• 适用于 单行文本的垂直居中。
  
• 多行文本不适用，可能会导致内容溢出。
  

---

方法 2：vertical-align

使用 vertical-align 让行内元素或行内块元素在同一行中垂直对齐：

1. .container {
2.     height: 100px;
3.     display: inline-block;
4.     vertical-align: middle;
5. }

复制代码

适用场景：

• 适用于 行内元素 或 行内块元素（如 img） 的垂直居中。
  

---

2.2 块级元素的垂直居中

方法 1：绝对定位 + transform

1. .parent {
2.     position: relative;
3.     width: 500px;
4.     height: 500px;
5. }
7. .child {
8.     position: absolute;
9.     top: 50%;
10.     left: 50%;
11.     transform: translate(-50%, -50%);
12. }

复制代码

适用场景：

• 适用于 固定宽高的块级元素。
  

---

3. 使用 Flexbox 实现程度 & 垂直居中

3.1 程度居中

使用 justify-content: center 让子元素在父元素的 主轴上 居中：

1. .container {
2.     display: flex;
3.     justify-content: center;
4. }

复制代码

适用场景：

• 适用于 Flexbox 布局下的程度居中。
  

---

3.2 垂直居中

使用 align-items: center 让子元素在父元素的 侧轴上 居中：

1. .container {
2.     display: flex;
3.     align-items: center;
4.     height: 300px;
5. }

复制代码

适用场景：

• 适用于 Flexbox 布局下的垂直居中。
  

---

3.3 程度 & 垂直居中

使用 display: flex + justify-content: center + align-items: center：

1. .container {
2.     display: flex;
3.     justify-content: center;  /* 水平居中 */
4.     align-items: center;      /* 垂直居中 */
5.     height: 300px;
6. }

复制代码

适用场景：

• 适用于 Flexbox 布局的完全居中。
  

---

4. 使用 CSS Grid 实现程度 & 垂直居中

4.1 单个元素居中

1. .container {
2.     display: grid;
3.     place-items: center;
4.     height: 300px;
5. }

复制代码

适用场景：

• 适用于 Grid 布局的居中。
  

---

总结

方法程度居中垂直居中适用场景margin: 0 auto;✅❌块级元素，需固定 widthtext-align: center;✅❌行内元素或行内块元素line-height❌✅单行文本vertical-align: middle❌✅行内元素、行内块元素position: absolute + transform✅✅恣意元素display: flex; justify-content: center;✅❌Flexbox 布局display: flex; align-items: center;❌✅Flexbox 布局display: flex; justify-content: center; align-items: center;✅✅Flexbox 完全居中display: grid; place-items: center;✅✅Grid 完全居中 最推荐的方法：

• 文本居中 → text-align: center（程度），line-height（垂直）
  
• 块级元素居中 → margin: 0 auto（程度）
  
• 现代布局 → Flexbox 或 Grid（程度 & 垂直）
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。