当浏览器调整大小时将div保留在视图中

<div id="myDiv" class="resizable-div">Hello, world!</div>

.resizable-div {
  position: fixed;  /* 使用定位属性将 div 固定在视图中 */
  top: 50%;  /* 设置初始垂直位置为视图顶部的一半 */
  left: 50%;  /* 设置初始水平位置为视图左侧的一半 */
  transform: translate(-50%, -50%);  /* 使用 transform 属性将 div 居中 */
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
}

@media screen and (max-width: 768px) {
  .resizable-div {
    top: 70%;  /* 当视图宽度小于等于 768px 时，将 div 的垂直位置调整为视图顶部的 70% */
  }
}

@media screen and (max-width: 480px) {
  .resizable-div {
    top: 80%;  /* 当视图宽度小于等于 480px 时，将 div 的垂直位置调整为视图顶部的 80% */
  }
}

window.addEventListener('resize', function() {
  // 获取 div 元素
  var div = document.getElementById('myDiv');
  
  // 获取视口的宽度和高度
  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  
  // 设置 div 的位置
  div.style.top = viewportHeight * 0.5 + 'px';
  div.style.left = viewportWidth * 0.5 + 'px';
});