为何position: relative仅在Chrome生效？表格垂直居中跨浏览器兼容问题

嘿，我来帮你搞定这个跨浏览器垂直居中的坑！先给你拆解下问题根源：你用position: relative; top: 50%实现垂直居中时，这个top: 50%是相对于父元素的高度来计算的。但如果你的父容器（比如<html>和<body>）没有设置明确的高度，Firefox、Edge和IE这些浏览器就找不到参考基准，自然不会生效——Chrome可能在默认样式上做了特殊处理，才让它看起来能用。

下面给你两种解决方案，按需选择：

方案1：修复原有代码的兼容性 #

只需要给父容器（html和body）设置100%高度，同时清除默认的margin和padding，让表格的relative定位有正确的参考：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#content {
  margin: 0 auto;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 15pt;
  position: relative;
  top: 50%;
  /* 保留前缀兼容旧版浏览器，现代浏览器可省略 */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 0;
}

方案2：用Flexbox实现（推荐，更简洁可靠） #

Flexbox是现在跨浏览器布局的首选方案，代码更易读，兼容性覆盖所有现代浏览器（包括IE11），完全不需要依赖position和transform的复杂组合：

HTML保持不变： #

<table border="1" id="content"> 
  <tr> 
    <td><video id="video" controls></video></td> 
  </tr> 
</table>

CSS修改为： #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* 将body设为flex容器，直接实现子元素水平+垂直居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

#content {
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 15pt;
  z-index: 0;
  /* 这里不需要margin:0 auto了，flex已经帮你搞定水平居中 */
}

如果需要兼容IE10及更早版本，方案1的修复版更稳妥；如果只需要兼容IE11+和现代浏览器，方案2是最优解——它专门为布局设计，不会出现position定位带来的各种奇怪兼容性问题。

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