CSS元素居中大全，2024年最新腾讯、阿里前端高级面试真题汇总

在CSS中，实现元素居中有多种方法，以下是一些常用的居中技术：

1. 水平居中 - 行内元素或文本

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

2. 水平居中 - 块级元素

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

3. 水平居中 - 使用Flexbox

.center-flexbox {
  display: flex;
  justify-content: center;
}

4. 垂直居中 - 单行文本

.center-vertical-text {
  height: 100px;
  line-height: 100px; /* same as height to vertically center text */
}

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

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

6. 水平和垂直居中 - 使用Grid

.center-grid {
  display: grid;
  place-items: center;
}

7. 水平和垂直居中 - 定位与转换

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

以上代码示例涵盖了常见的居中方式，可以根据实际需求选择合适的居中策略。