固定定位footer内的div无法居中反而悬浮在footer上方如何解决

问题原因 #

你设置的.test样式存在重复垂直偏移冲突：你用bottom: 50%将子元素底边定位到父级footer高度的一半位置，又通过transform: translate(-50%, -50%)让元素在Y轴方向向上偏移自身高度的50%，再加上.test和footer高度相同都是1.5em，最终整个元素就会错位悬浮在footer上方。

解决方案 #

方案1（更简洁，无需绝对定位）

你已经给父级footer设置了text-align: center，.test本身为行内块元素，直接删掉不需要的绝对定位相关属性即可实现水平垂直居中，修改后的代码如下：

.test {
  float: none;
  background-color: blueviolet;
  display: inline-block;
  height: 1.5em;
  width: 90%;
  padding: 0;
}

方案2（保留绝对定位写法）

把bottom: 50%替换为top: 50%即可，修改后的代码如下：

.test {
  float: none;
  background-color: blueviolet;
  position: absolute;
  display: inline-block;
  height: 1.5em;
  width: 90%;
  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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