0

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

我的目标是在 div“oID_1”的中心显示消息“弹出”块。有谁能够帮我？

<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>
4

3 回答 3

1

如果你的元素是绝对定位的并且你知道它的宽度，你总是可以使用 left: 50%; 左边距：-（半角）px

于 2012-07-26T09:13:53.627 回答
0

Take a look at the following website: http://bushraaadit.appspot.com/

Now the way they have centered the div is quite simple. First we'll take a look at the HTML structure:

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

Okay so we have three nested divs. The first one (the container) is the div within which you want to center the third div (center). The second div (the wrapper) is used to help center it. Think of it as a center tag which centers horizontally and vertically.

Now for the CSS (yes it works purely on CSS and automatically re-centers itself when the container div is resized). Give the container div any width and height you want. Now for the wrapper and the center divs.

The wrapper div must have the same width and height as the center div. If the center div needs an explicit width and height (say 50% of the container) then set it on the wrapper and set the width and height of the center as 100% (which is 100% of 50% of the container). Otherwise make the wrapper float to the left (doing so will automatically shrink it to the size of the center div).

Finally to center it we first set the position of the wrapper and center to relative. Then the wrapper div is positioned 50% to the right and the bottom from where it is (50% of the container). Then the center div is positioned 50% to the left and top from where it is (50% of the wrapper which is 50% of itself).

The resulting CSS is something like:

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%;
}

The end result can be seen in this fiddle: http://jsfiddle.net/a3kVj/

Hope that helps.

于 2012-07-26T10:02:32.923 回答
0

可以使用 jQuery 吗？看看center-div-with-jquery

于 2012-07-26T09:10:12.783 回答