div 垂直居中兼容写法

在CSS中，有多种方法可以使一个元素垂直居中，以下是一些常用的兼容写法：

方法1：使用flexbox布局

.parent {
  display: flex;
  align-items: center;
}

方法2：使用绝对定位和负边距

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

方法3：使用表格布局

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

方法4：使用display: inline-block和vertical-align: middle

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

方法5：使用display: table和display: table-cell

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

这些方法在大多数现代浏览器中都能很好地工作，但如果要兼容一些旧版浏览器，可能需要使用更多的hack和特殊处理