请问是否有更简便的方法实现h5元素垂直居中？

当然有几种更简洁或适配不同场景的实现方式，以下是具体方案：

• Grid布局方案
  父元素仅需两行代码即可实现垂直居中（若需同时水平居中可简化为一行）：

  .parent {
    height: 100%;
    display: grid;
    align-items: center; /* 仅实现垂直居中 */
    /* 如需同时水平居中，替换为 place-items: center; */
  }
  

  Grid布局的写法比flex更紧凑，在复杂排版场景下扩展性更强。

• 绝对定位+transform方案
  无需给父元素设置flex/grid，通过定位特性实现：

  .parent {
    position: relative;
    height: 100%;
  }
  .parent h5 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

  该方案适合父元素不能使用flex/grid的场景，不会干扰其他子元素的正常布局流。

• Table-cell布局方案
  利用表格原生的垂直对齐特性：

  .parent {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
  }
  

  注意：若父元素的上级容器未设置display: table; width: 100%;，可能需要补充该样式以保证宽度撑满容器。

你当前使用的flex方案已经足够简洁，上述方案均为不同场景下的替代选项，可根据实际布局限制灵活选择。

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