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

Question

I have a div block for which I am calculating its width and offset height on the basis of the calculation below. 我有一个div块，我将根据以下计算来计算其宽度和偏移高度。 Now I am trying to place the message holder block inbetween the div block. 现在，我试图将消息保存器块放置在div块之间。

My aim is to show the message "popup" block in the center of the div "oID_1". 我的目的是在div“ oID_1”的中心显示消息“ popup”块。 Can anybody help me? 有谁能够帮助我？

<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

If your element is absolute positioned and you know it's width, you can always use left: 50%; 如果您的元素是绝对定位的并且知道它的宽度，则可以始终使用left：50％; margin-left: -(half width)px 左边距：-（半宽）px

Answer 2

Can you use jQuery? 可以使用jQuery吗？ Take a look at center-div-with-jquery 看看带有jQuery的center-div-with

Answer 3

Take a look at the following website: http://bushraaadit.appspot.com/ 看一下以下网站： http : //bushraaadit.appspot.com/

Now the way they have centered the div is quite simple. 现在，他们将div居中的方式非常简单。 First we'll take a look at the HTML structure: 首先，我们来看一下HTML结构：

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

Okay so we have three nested divs. 好的，我们有三个嵌套的div。 The first one (the container ) is the div within which you want to center the third div ( center ). 第一个（ container ）是要在其中居中的第三个div（ center ）的div。 The second div (the wrapper ) is used to help center it. 第二个div（ wrapper ）用于帮助居中。 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). 现在是CSS（是的，它仅可在CSS上工作，并在调整container div的大小时自动重新居中）。 Give the container div any width and height you want. 给container div任意宽度和高度。 Now for the wrapper and the center divs. 现在是wrapper和center div。

The wrapper div must have the same width and height as the center div. wrapper div的宽度和高度必须与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). 如果center的div需要明确的宽度和高度（比如所述容器的50％）然后将其设置在wrapper并设置的宽度和高度center为100％（这是容器的50％100％）。 Otherwise make the wrapper float to the left (doing so will automatically shrink it to the size of the center div). 否则，使wrapper向左浮动（这样做会自动将其缩小到center div的大小）。

Finally to center it we first set the position of the wrapper and center to relative. 最后使其居中，我们首先设置的位置wrapper和center相对。 Then the wrapper div is positioned 50% to the right and the bottom from where it is (50% of the container). 然后将wrapper div从其所在位置（容器的50％）向右和向下50％定位。 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). 然后将center div从其所在位置的左侧和顶部定位50％（ wrapper的50％本身就是其50％）。

The resulting CSS is something like: 生成的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%;
}

The end result can be seen in this fiddle: http://jsfiddle.net/a3kVj/ 最终结果可以在以下小提琴中看到： http : //jsfiddle.net/a3kVj/

Hope that helps. 希望能有所帮助。

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

问题描述

3 个解决方案

解决方案1
1 2012-07-26 09:13:53

解决方案2
0 2012-07-26 09:10:12

解决方案3
0 2012-07-26 10:02:32

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

问题描述

3 个解决方案

解决方案1 1 2012-07-26 09:13:53

解决方案2 0 2012-07-26 09:10:12

解决方案3 0 2012-07-26 10:02:32

解决方案1
1 2012-07-26 09:13:53

解决方案2
0 2012-07-26 09:10:12

解决方案3
0 2012-07-26 10:02:32