如何将class为wish的h1元素在section中水平垂直居中？

下面是几种经过验证的实现方式，根据你的项目兼容性需求选择即可：

Flexbox 方案（最推荐） #

这是现代前端布局的首选方案，代码简洁且兼容性良好：

section {
  /* 先给section设置高度，比如占满整个视口高度，或者根据你的布局需求设置具体值 */
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
}

.wish {
  /* 移除h1默认的外边距，避免影响居中位置 */
  margin: 0;
}

Grid 方案 #

用Grid布局可以一步到位实现双方向居中，代码更精简：

section {
  height: 100vh;
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
}

.wish {
  margin: 0;
}

绝对定位 + Transform 方案（兼容旧浏览器） #

如果需要兼容IE9及以上浏览器，可以用这个方案，不需要改变父容器的布局模型：

section {
  position: relative; /* 父容器设置相对定位，作为绝对定位的参考 */
  height: 100vh;
}

.wish {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 通过transform自身偏移50%，实现精准居中 */
  transform: translate(-50%, -50%);
  margin: 0;
}

关键注意事项 #

1. 必须确保section元素有明确的高度，如果section只是由内容撑开高度，垂直居中效果无法显现。可以根据实际需求设置height: 100vh（占满视口）、固定像素值或者继承父容器高度。
2. 一定要移除h1的默认外边距，浏览器默认的margin-top和margin-bottom会导致元素偏移，影响居中效果。

内容的提问来源于stack exchange，提问作者Akshat bhatter