通过JavaScript使Div居中并随网页大小改变而改变

要实现通过JavaScript使Div居中并随网页大小改变而改变，可以遵循以下步骤：

给该Div设置样式，使其垂直和水平居中，并将左右和上下的边距都设置为auto。例如：

.div-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用JavaScript获取该Div元素，并计算出居中需要的偏移量。例如：

var div = document.getElementById('div-center');
var divWidth = div.offsetWidth;
var divHeight = div.offsetHeight;
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var leftOffset = (screenWidth - divWidth) / 2;
var topOffset = (screenHeight - divHeight) / 2;

将计算出来的偏移量动态赋值给该Div的样式中。例如：

div.style.left = leftOffset + 'px';
div.style.top = topOffset + 'px';

使用window对象的resize事件，监听浏览器窗口的变化，并重新计算并设置居中偏移量。例如：

window.addEventListener('resize', function() {
  var divWidth = div.offsetWidth;
  var divHeight = div.offsetHeight;
  var screenWidth = window.innerWidth;
  var screenHeight = window.innerHeight;
  var leftOffset = (screenWidth - divWidth) / 2;
  var topOffset = (screenHeight - divHeight) / 2;
  div.style.left = leftOffset + 'px';
  div.style.top = topOffset + 'px';
});

示例1：一个固定大小的Div元素居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>居中的Div</title>
  <style>
    .div-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 300px;
      background-color: #eee;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="div-center" class="div-center">
    <h1>这是一个居中的Div</h1>
    <p>你可以通过调整窗口大小来测试居中是否正常</p>
  </div>

  <script>
    var div = document.getElementById('div-center');
    var divWidth = div.offsetWidth;
    var divHeight = div.offsetHeight;
    var screenWidth = window.innerWidth;
    var screenHeight = window.innerHeight;
    var leftOffset = (screenWidth - divWidth) / 2;
    var topOffset = (screenHeight - divHeight) / 2;
    div.style.left = leftOffset + 'px';
    div.style.top = topOffset + 'px';

    window.addEventListener('resize', function() {
      var divWidth = div.offsetWidth;
      var divHeight = div.offsetHeight;
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      var leftOffset = (screenWidth - divWidth) / 2;
      var topOffset = (screenHeight - divHeight) / 2;
      div.style.left = leftOffset + 'px';
      div.style.top = topOffset + 'px';
    });
  </script>
</body>
</html>

示例2：一个自适应大小的Div元素居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自适应大小的居中Div</title>
  <style>
    .div-center {
      position: absolute;
      top: 50%;
      left: 50%;
      max-width: 90%;
      max-height: 90%;
      background-color: #eee;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="div-center" class="div-center">
    <h1>这是一个自适应大小的居中Div</h1>
    <p>你可以通过调整窗口大小来测试居中是否正常</p>
  </div>

  <script>
    var div = document.getElementById('div-center');

    function centerDiv() {
      var divWidth = div.offsetWidth;
      var divHeight = div.offsetHeight;
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      var leftOffset = (screenWidth - divWidth) / 2;
      var topOffset = (screenHeight - divHeight) / 2;
      div.style.left = leftOffset + 'px';
      div.style.top = topOffset + 'px';
    }

    centerDiv();

    window.addEventListener('resize', centerDiv);
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：通过JavaScript使Div居中并随网页大小改变而改变 - Python技术站

通过JavaScript使Div居中并随网页大小改变而改变

相关文章