Question

我有一个div块，我根据下面的计算计算它的宽度和偏移高度。现在我试图将消息持有者块放在div块之间。

我的目标是显示消息＆＃34; popup＆＃34;阻止在div的中心＆＃34; oID_1＆＃34;。有人能帮助我吗？

<BODY>
  <head>
  <script>
  function msgBox(message) {
    var msgbox = document.getElementById("msgbox");
    msgbox.innerHTML = message;
    var x = (window.innerWidth / 2) - (msgbox.offsetWidth / 2);
    var y = (window.offsetHeight / 2) - (msgbox.offsetHeight / 2);              
    msgbox.style.top = y;
    msgbox.style.left = x;
    msgbox.style.display = "block";
  }
</script>
<style type="text/css">
  .popup {
    width:100px;
    height:100px;
    position:absolute;
    display:none;
    border:1px solid green;
  }
</style>
<script type="text/javascript">
  function showPopup(id) {
    var popup = document.getElementById(id);
    var divblock=document.getElementById('oID_1');
    width=parseInt(oID_1.style.width);
    var x = (width / 2) - (popup.offsetWidth / 2);
    var y = (divblock.offsetHeight / 2) - (popup.offsetHeight / 2);              
    popup.style.top = y;
    popup.style.left = x;
    popup.style.display = "block";
  }
</script>
</head>
<DIV CLASS="body">
  <center>
  <div id="popup" class="popup">
    This a vertically and horizontally centered popup.
  </div>
  <a onclick="showPopup('popup');">Show Popup</a>
  <DIV ID="oID_1" STYLE=" width:300; height:300;border:1px solid red">
  </DIV>
  </center>
</DIV> 
</BODY>

Answer 1

如果您的元素是绝对定位的并且您知道它的宽度，则可以始终使用left：50％; margin-left： - （半宽）px

Answer 2

你能用jQuery吗？看看center-div-with-jquery

Answer 3

请查看以下网站：http://bushraaadit.appspot.com/

现在他们以div为中心的方式非常简单。首先我们来看看HTML结构：

<div id="container">
    <div id="wrapper">
        <div id="center"></div>
    </div>
</div>

好的，我们有三个嵌套的div。第一个（container）是你想要将第三个div（center）居中的div。第二个div（wrapper）用于帮助居中。可以把它想象成一个水平和垂直居中的中心标签。

现在用于CSS（是的，它完全适用于CSS，并在container div调整大小时自动重新定位）。为container div提供您想要的任何宽度和高度。现在是wrapper和center div。

wrapper div 必须与center div相同的宽度和高度。如果center div需要明确的宽度和高度（比如容器的50％），则将其设置在wrapper上，并将center的宽度和高度设置为100％（其中是50％容器的100％）。否则将wrapper浮动到左侧（这样做会自动将其缩小到center div的大小）。

最后，我们首先将wrapper和center的位置设置为相对位置。然后wrapper div位于右侧50％和底部位置（容器的50％）。然后，center div位于左侧和顶部50％处（wrapper的50％，即自身的50％）。

生成的CSS类似于：

html, body, #container {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
}

#container {
    background-color: #FFF0F5;
}

#wrapper {
    height: 50%;
    left: 50%;
    position: relative;
    top: 50%;
    width: 50%;
}

#center {
    background-color: #FFE4E1;
    bottom: 50%;
    height: 100%;
    position: relative;
    right: 50%;
    width: 100%;
}

最终结果可以在这个小提琴中看到：http://jsfiddle.net/a3kVj/

希望有所帮助。

如何将弹出消息放在div的中心？

3 个答案: