[RESOLVED] Center an onclick css box

[Peuplarchie]

Good day to you all,
I'm working on a piece of code which display an image and when you click on it a full size image appears on a css box.

I was wondering how can I center it on the screen, knowing the size will be different for each....


<img src="Web/ThePonder/The Ponder.png" width="160" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'block' " />
<div id='Ponder' class='Ponder' style='display: none; position: absolute; margin: 0px auto -1px auto; border: dashed black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'none' " onmouseover='this.style.cursor="pointer" '>
<img src="Web/ThePonder/The Ponder.png" width="500" />
<br />
</div>



If someone can help me understand how I can do this.
Thanks !

[Centauri]

Auto side margins won't work on an absolutely positioned element. What you can do is set the left position to 50%, which will move the left edge to the centre of the screen, and then use a negative left margin equal to half the image width to pull it back across to the centre :style='display: none; position: absolute; left: 50%; margin: 0px 0 -1px -260px; border: dashed black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; '

[Peuplarchie]

Thanks it work perfectly with a position of top 1%.