Member Avatar for simmy7

A requirement for the project I am currently working on is that when various links on a page are clicked that the appropriate "layer" (i.e. div) will be displayed centered in the browser. I have tried using various javascript solutions and they center some div's and not others. Does anyone have an example of a way to show and hide a div that is centered in the browser no matter where the div is located in the html?

Any html/css and javascript code examples greatly appreciated!

Thanks
Simmy

  • 2 Contributors
  • 2 Replies
  • 370 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Inny

Dani AI

Generated

Short answer: put the DIV where you like in the markup and center it with CSS using viewport positioning and transforms — that makes its position independent of HTML order and of the element's size.

Example (CSS + tiny JS toggle):

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  overflow: auto;
  display: none;
  box-sizing: border-box;
  padding: 16px;
  background: #fff;
}

.modal.is-open { display: block; }
function toggleModal(id) {
  var el = document.getElementById(id);
  if (!el) return;
  var opened = el.classList.toggle('is-open');
  el.setAttribute('aria-hidden', opened ? 'false' : 'true');
  if (opened) (el.querySelector('button, a, input, [tabindex]') || el).focus();
}

Why this fixes the problems seen here: 's absolute/left/top approach requires guessing offsets or listening to resize/scroll and can break at different resolutions. Using position: fixed + left:50%/top:50% with transform: translate(-50%,-50%) centers the box in the viewport regardless of DOM position or element size and avoids relying on deprecated tags like <center>.

Practical notes and troubleshooting:

  • Add an overlay with a lower z-index behind the modal if you need a dim background.
  • For very old browsers (IE6) that lack position: fixed, fall back to position: absolute and recalc on scroll/resize.
  • Make the box responsive with max-width and max-height so it fits mobile screens; use overflow:auto for internal scrolling.
  • Accessibility: toggle aria-hidden, move focus into the modal when opened, restore focus when closed, and allow ESC to close.

This addresses 's requirement to center "no matter where the div is located in the html" and gives a robust, responsive alternative to fixed pixel offsets.

Recommended Answers

All 2 Replies

Member Avatar for Inny

sorry, i think i misunderstood you, this might be what you need. example...

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>


<center><div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div></center>





<center><a href="javascript:ReverseContentDisplay('uniquename')">
Click to show/hide.
</a></center>

div that is centered in the browser no matter where the div is located in the html?

You want an absolutely positioned element, in this case the div "unique name" . to do that

<div id="uniquename" style="position: absolute;
              left: 50px;
              top: 50px;
              width: 50px;
              height: 50px;
              display:none;">
<p> content Here </p>
</div>

setting the left & top attributes for centering and width & height for size.

Forgive me if Im wrong. Matt Evans will know, hes a genious! :D

Member Avatar for Inny

ps center of your browser will need to based on the resolution your site is designed for, eg 800x600 for example.

otherwise you need 'Auto' margin and im not sure how you can do that.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.