Place an element in the center of the screen, even if the mobile device is zoomed (CSS or JS)

Question

A user is on my webpage and has pressed a key. This key triggers a hidden div to become visible and display a message in the center of the screen.

On desktop browsers, I can achieve this easily:

.notif-div{
  background-color: #000;   
  position:fixed;
  top:50%;
  left:50%;
  z-index:60;
  visibility: hidden;
}

This works great, even if the browser is zoomed.

However, in browsers on mobile devices, such as Chrome or Safari the iPad Pro - which permit an apparently special form of zooming - I have not yet found a method that is able to reliably place a div in the center of the user's screen.

Instead, the "centered" div is centered relative to some un-zoomed version of the page, but if the user is sufficiently zoomed, the div might be placed entirely out of their viewing window.

The same issue is true if, for example, I try to fix an element at the top or the bottom of the page - it works fine until a mobile user zooms.

Has anyone found a CSS or JavaScript solution to the mobile zooming problem?

score 0 · Accepted Answer · answered Feb 27 '20 at 04:25

For me, the solution was a combination of this answer that suggested an absolute rather than a fixed placement with watchers to detect scroll/zoom, and then this answer that placed an absolute element in the middle of the screen instead of a fixed element.

So in CSS I have:

.notif-div{
    background-color: #000;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    transform: translate3d(0,0,0);
    z-index:60;
    visibility: hidden;
    padding:4px;
}

In JavaScript I have:

    function rePosition() {
        var drag = document.getElementById("drawmessage");

        drag.style.left = window.innerWidth/2 + window.pageXOffset + 'px';
        drag.style.top = window.innerHeight/2 + window.pageYOffset + 'px';
    }

    window.addEventListener('scroll', function(e){
        rePosition();
    })

And then in HTML I have:

<div class="notif-div" id="drawmessage">Hello</div>

And as a result, I can see the message that I display in that div even when I'm deeply zoomed on mobile:

Place an element in the center of the screen, even if the mobile device is zoomed (CSS or JS)

1 Answers1