Question 194132 in Html Question posted in
Some basic documentation can be found here.

Html – How to position dialog element in the middle of its parent container

The default behavior of the element is that it centers in the middle of the screen but I want it to center inside a container that it is in instead.

In the example below I have set #container with flex to center the dialog box but it doesnt affect the positioning at all, I also put some text inside just to check that it was working properly.

  1. How do I position the dialog in the middle of its parent container?
  2. It seems that using flex (or any display type) on the dialog box itself to position elements inside of it causes it to automatically reveal itself, is there a way to use flex without making it reveal itself (also the positioning of when this happens is different to when it is manually opened? You will see when you press the button)

I have tried using position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); too but that doesn’t work either.

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");


// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  favDialog.showModal();
});
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid red 2px;
  width: 700px;
  height: 700px;
}

#favDialog {
  display: flex;
  

  /*   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}
<!-- A modal dialog containing a form -->
<p>
  <button id="showDialog">Show the dialog</button>
</p>

<div class="container">
  <p> Dolore commodo cupidatat excepteur tempor irure amet aliquip amet commodo in ipsum ut ipsum occaecat.</p>
  <dialog id="favDialog">
    <h3>Title</h3>
    <p>Dolore fugiat aliquip sint dolor elit dolore labore.</p>
    <p>Labore incididunt id laborum occaecat.</p>

  </dialog>
</div>
Tags:

2

Answers


  1. 0

    Use the position for child div so it will display exaclty horizontally and vertically center.

    const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");


// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  favDialog.showModal();
});
    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid red 2px;
  width: 700px;
  height: 700px;
}

#favDialog {
  display: flex;
  width: 200px;
  height: 200px;
  position: absolute;
  background: #eee;
  border: 1px solid #000;
  text-align: center;
  padding: 20px;

  
}
    <!-- A modal dialog containing a form -->
<p>
  <button id="showDialog">Show the dialog</button>
</p>

<div class="container">
  <p> Dolore commodo cupidatat excepteur tempor irure amet aliquip amet commodo in ipsum ut ipsum occaecat.</p>
  <dialog id="favDialog">
    <h3>Title</h3>
    <p>Dolore fugiat aliquip sint dolor elit dolore labore.</p>
    <p>Labore incididunt id laborum occaecat.</p>

  </dialog>
</div>
    Login or Signup to reply.
  2. 0

    You can limit an elements positioning by giving the parent a position of relative and the child a position of absolute.
    Example:

    <div class="container">
    <div id="favDialog"></div>
</div>

    .container {
    position: relative;
}

#favDiolog {
    position: absolute;
}

    That will prevent the child element from going outside of the parent, because it makes the child element’s position dependent on the parent instead of the body.
    If you want more info, I’d start here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search