最强教程！CSS居中12种方法，手把手教你搞定各种居中

CSS 垂直水平居中：终极指南

探索居中元素的艺术

在 Web 开发中，居中元素是网页设计的关键部分。无论是对齐文本、图片还是按钮，居中都可以增强视觉吸引力并提升用户体验。本文将深入探讨 CSS 中垂直水平居中的 12 种强大方法，帮助您掌握居中的艺术。

1. Flexbox 居中

Flexbox 是一种灵活的布局系统，提供了一种简单而有效的方式来水平或垂直居中元素。通过设置父元素的 display 属性为 flex，并为子元素设置 margin 属性为 auto，您可以轻松实现居中对齐。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  margin: auto;
}

2. Grid 布局居中

Grid 布局是另一种现代布局技术，它允许您在网格中放置元素。要垂直或水平居中元素，只需将父元素的 display 属性设置为 grid，并为子元素设置 justify-self 和 align-self 属性为 center。

.parent {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
}

.child {
  justify-self: center;
  align-self: center;
}

3. Margin 居中

Margin 居中是一种经典的技术，适用于元素的宽度和高度已知的情况。通过将元素的 margin-left 和 margin-right 属性设置为 auto，您可以轻松水平居中元素。

.element {
  margin: auto;
}

4. Padding 居中

类似于 Margin 居中，Padding 居中通过将元素的 padding-left 和 padding-right 属性设置为 auto 来水平居中元素。这对于元素的宽度和高度已知的情况也很有用。

.element {
  padding: auto;
}

5. Transform 居中

Transform 居中使用 CSS 的 transform 属性来水平或垂直居中元素。通过将元素的 transform 属性设置为 translate(-50%, -50%)，您可以将元素向左和向上平移 50%，从而将其居中。

.element {
  transform: translate(-50%, -50%);
}

6. Position 居中

Position 居中通过设置元素的 position 属性为 absolute，并将其 top 和 left 属性设置为 50% 来居中元素。与 transform 居中类似，它也会将元素向左和向上平移 50%。

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7. Table 居中

如果您正在使用表格元素，可以使用 text-align 属性来居中单元格中的内容。通过将表格的 text-align 属性设置为 center，您可以水平居中单元格中的文本。

table {
  text-align: center;
}

8. Display 居中

display 居中通过将元素的 display 属性设置为 table-cell，并将其 vertical-align 属性设置为 middle 来居中元素。这适用于块级元素，它会使元素垂直居中。

.element {
  display: table-cell;
  vertical-align: middle;
}

9. Vertical-align 居中

vertical-align 居中仅适用于内联元素。通过将元素的 vertical-align 属性设置为 middle，您可以将内联元素垂直居中。

.element {
  vertical-align: middle;
}

10. Line-height 居中

对于块级元素，您可以使用 line-height 属性来垂直居中内容。将元素的 line-height 属性设置为与元素的高度相等，即可在元素内垂直居中内容。

.element {
  line-height: 100px;
}

11. Text-align 居中

对于文本元素，使用 text-align 属性可以水平居中文本内容。通过将文本元素的 text-align 属性设置为 center，您可以水平居中文本。

.element {
  text-align: center;
}

12. Align-self 居中

对于 Flexbox 子元素，您可以使用 align-self 属性来垂直居中元素。通过将 Flexbox 子元素的 align-self 属性设置为 center，您可以垂直居中该元素。

.element {
  align-self: center;
}

常见问题解答

1. 哪种方法最通用？

对于大多数情况，Flexbox 居中和 Grid 布局居中是最通用且强大的方法。

2. 我可以将多个方法组合使用吗？

一般情况下，不建议将多种方法组合使用，因为这可能会导致意想不到的行为。

3. 为什么我的元素不能居中？

确保父元素具有足够的空间来容纳子元素，并且子元素的宽度和高度已正确定义。

4. 如何水平和垂直居中元素？

根据具体情况，可以使用 Flexbox 居中、Grid 布局居中或 Transform 居中来实现水平和垂直居中。

5. 我可以使用这些方法居中任何类型的元素吗？

这些方法适用于所有类型的 HTML 元素，包括文本、图像和按钮。