居中对齐的实现方式

在 CSS 中，有多种方法可以实现元素的居中对齐。以下是一些常用的居中对齐方法，包括水平居中、垂直居中以及同时水平和垂直居中。

1. 块级元素水平居中

对于块级元素，可以使用 margin 属性将其水平居中。

.block {
  margin: 0 auto;
  width: 200px; /* 需要设置固定宽度 */
}

2. 行内元素水平居中

对于行内元素，可以使用父元素的 text-align 属性将其水平居中。

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

3. Flexbox 布局

Flexbox 是一种非常强大的布局方式，可以轻松实现水平和垂直居中。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度，例如全屏高度 */
}

4. Grid 布局

CSS Grid 布局也可以轻松实现水平和垂直居中。

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh;       /* 设置容器高度，例如全屏高度 */
}

5. 绝对定位

使用绝对定位可以实现元素的精确居中。

.parent {
  position: relative;
  height: 100vh; /* 设置容器高度，例如全屏高度 */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 调整元素自身的位置 */
}

6. 表格布局

使用表格布局也可以实现垂直居中。

.container {
  display: table;
  height: 100vh; /* 设置容器高度，例如全屏高度 */
  width: 100%;   /* 设置容器宽度 */
}

.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center;     /* 水平居中 */
}

7. 单行文本垂直居中

对于单行文本，可以使用 line-height 属性实现垂直居中。

.container {
  height: 100px; /* 设置容器高度 */
  line-height: 100px; /* 与容器高度相同 */
  text-align: center; /* 水平居中 */
}

.child {
  line-height: normal; /* 重置子元素的行高 */
}

总结

• 水平居中：块级元素使用 margin: 0 auto，行内元素使用 text-align: center。
• 垂直居中：使用 Flexbox、Grid、绝对定位或表格布局。
• 同时水平和垂直居中：推荐使用 Flexbox 或 Grid 布局，因为它们简单且强大。