设置display: table后如何水平居中fixed定位的div？

这个情况我之前也碰到过，核心原因是position: fixed和display: table的渲染规则在同时设置left:0和right:0时产生了冲突：当你给fixed定位元素设置左右偏移为0时，浏览器会默认让元素宽度撑满视口，但display:table的特性是宽度由内容自适应，这就导致margin:0 auto的居中逻辑失效，元素自然会左偏。

下面给你两个实用的解决方案：

方案一：用transform实现自适应宽度居中（推荐） #

移除left:0和right:0，改用left:50%配合transform: translateX(-50%)的方式，这种方法兼容性好，且不管元素是自适应宽度还是固定宽度都能完美居中：

#download {
  background: rgba(225, 245, 245, 0.4);
  border-radius: 3px;
  bottom: 16px;
  display: table;
  padding: 5px;
  position: fixed;
  left: 50%; /* 让元素左边缘对齐视口中点 */
  transform: translateX(-50%); /* 向左偏移自身宽度的一半，实现居中 */
  text-align: center;
}

原理很简单：left:50%把元素的左边缘定位到视口水平中点，transform: translateX(-50%)则将元素整体向左移动自身宽度的50%，最终让元素的中心点和视口中心点对齐，完全不受元素宽度影响。

方案二：用width: fit-content配合原有定位 #

如果你想保留left:0和right:0，可以添加width: fit-content强制元素宽度自适应内容，再结合margin:0 auto实现居中：

#download {
  background: rgba(225, 245, 245, 0.4);
  border-radius: 3px;
  bottom: 16px;
  display: table;
  left: 0;
  right: 0;
  width: fit-content; /* 让宽度自适应内容 */
  margin: 0 auto;
  padding: 5px;
  position: fixed;
  text-align: center;
}

这个方案的核心是width: fit-content，它会覆盖fixed定位下默认撑满视口的宽度规则，让元素回到display:table的自适应宽度状态，此时margin:0 auto就能正常生效了。

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