弹出框居中的三种写法-CSDN博客

1、通过（浏览器显示区域的宽高—弹出框的宽高）/ 2计算出弹出框定位的top和left

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>box-center-1</title>
</head>
<body>
<button id="open" onclick="openModal()">openModal</button>
<script type="text/javascript">
  function openModal(){
    var modalDom = document.createElement("div");
    //计算出弹出框定位的top值
    var iTop = (window.innerHeight - 400) / 2 + "px";
    //计算出弹出框定位的left值
    var iLeft = (window.innerWidth - 400) / 2 + "px";
    modalDom.style.cssText = "height:400px;width:400px;z-index:2;background-color:#7fbc39;color:#fff;text-align:center;line-height:400px;position:fixed;";
    modalDom.style.cssText += "top:" + iTop + ";left:" + iLeft;
    modalDom.innerText = "这是一个居中屏幕的弹框";
    document.body.appendChild(modalDom);
  }
</script>
</body>
</html>复制代码

2、这种方法在元素的宽高不固定时会全屏拉伸元素，在高度不固定靠子元素撑开自适应的情况下不适用。但是在宽高固定的情况下可以用，而且没有兼容性问题

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>box-center-2</title>
  <style>
    .box-center {
      height: 400px;
      width: 400px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      background-color: #00b4cf;
      color: #fff;
      text-align: center;
      line-height: 400px;
    }
  </style>
</head>
<body>
<button id="open" onclick="openModal()">openModal</button>
<script type="text/javascript">
  function openModal(){
    var modalDom = document.createElement("div");
    modalDom.innerText = "这是一个居中屏幕的弹框";
    modalDom.className = "box-center";
    document.body.appendChild(modalDom);
  }
</script>
</body>
</html>复制代码

3、用top:50% left:50%定位后元素的左上角会处于页面中间，然通过transform:translateX(-50%) translateY(-50%)是CSS3的新写法，让元素相对于他自身的宽高反向移动。配合上面的代码就能实现居中定位，而且适用于不确定宽高的元素，但是在低版本IE不兼容

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>box-center-3</title>
  <style>
    .box-center {
      position:fixed;
      top:50%;
      left:50%;
      transform:translateX(-50%) translateY(-50%);
      background-color: #435466;
      color: #fff;
      text-align: center;
      line-height: 20px;
    }
  </style>
</head>
<body>
<button id="open" onclick="openModal()">openModal</button>
<script type="text/javascript">
  function openModal(){
    var modalDom = document.createElement("div");
    modalDom.innerText = "这是一个居中屏幕的弹框";
    modalDom.className = "box-center";
    document.body.appendChild(modalDom);
  }
</script>
</body>
</html>复制代码