调整浏览器窗口大小时如何保持指定div元素始终居中显示

解决方案 #

你当前的标签会随窗口大小变化偏移，核心原因是父容器#olark-box-wrapper用了固定的top: 400px定位，窗口高度变化时400px的位置就不再是垂直中点。
只需修改两处CSS即可实现需求，全程不会改动position相关属性：

1. 调整父容器#olark-box-wrapper的定位规则，将固定top值改为垂直居中配置
2. 微调#side-chat的transform属性，修正旋转带来的偏移，保证对齐正确

修改后的对应CSS片段如下：

#side-chat {
  position: absolute;
  right: 100%;
  z-index:9999999999999 !important;
  width: 150px;
  margin-right: -59px;
  /* 调整transform顺序，先平移修正偏移再旋转 */
  transform: translateY(50%) rotate(-90deg);
  display:flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  border-radius: 10px;
  background: rgba(30, 175, 230, 0.5);
  text-decoration: none;
  padding: 15px;
  font-size: 25px;
  line-height: 20px;
  text-align: center;    
}
#olark-box-wrapper {
  position: absolute;
  z-index:99999999999999 !important;
  /* 替换原来的top:400px */
  top: 50%;
  transform: translateY(-50%);
  right: -300px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

修改后父容器会始终相对于页面视口垂直居中，子元素的聊天标签也会固定在右侧垂直中点，窗口缩放时位置不会发生偏移，原有滑动打开/关闭功能完全不受影响。

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