前端开发中最实用的【六种css居中对齐】方法，纯干货无废话

1. 水平居中 - 行内元素:

.center-inline {
  text-align: center;
}

2. 水平居中 - 块级元素:

.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* or any other value */
}

3. 水平居中 - 绝对定位元素:

.center-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

4. 垂直居中 - 单行文本:

.center-vertical-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; /* or any other value */
}

5. 水平和垂直居中 - 使用flexbox:

.center-flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; /* or any other value */
  width: 100px; /* or any other value */
}

6. 水平和垂直居中 - 使用css grid:

.center-grid {
  display: grid;
  place-items: center;
  height: 100px; /* or any other value */
  width: 100px; /* or any other value */
}

这些方法涵盖了不同场景下的居中对齐，你可以根据实际需求选择合适的方法。