如何将元素居中放置在视口中间？

Question

I want to center an element (div, modal/dialog box) in the middle of the viewport, regardless of the page size.

The idea is that the dialog box always appears in the middle of the current view port, so it can be seen by a user regardless of the page size. In my case, I have a very long page with lots of scrolling and if the user is at the bottom of the page and the dialog box appears in the middle of the page it cannot be seen by the user because it is not in his viewport.

My HTML site is run in an iframe, which makes the task even more difficult.

How can I do that with CSS only?

Answer 1

Apply following CSS

.center{
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}

Position fixed would make sure it's relative to the viewport. left and top 50% would move the element's top and left to the center. You'd want it to be in the absolute center, it can be done by transform: translate(-50%,-50%);

Answer 2

Try this snippet.

 .modal{ width: 200px; height: 150px; border: 1px solid black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div class="modal"> </div>

Well, after you edited the question and mentioned, that the page is in an iframe , I can at least say, that it is not possible to place an element inside of an iframe to the current viewport of the browser. The most global context of the element is the iframe itself, and it has no information about in whatever it is embedded.