Setting height to 100vh works but i get a scroll bar in mobile browsers

Issue

I have a website with a centered login screen. This is centered in all browsers perfectly but when I open it on my android phone the page gets a scroll bar, I think this is because of the navigation menu on my mobile browser which disappears when I scroll down on a web page.

body{
  margin:0;
}

.centered_layout {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

<div class="centered_layout">
    Centered app
</div>

Solution

EDIT: New solution

html, body {
    overflow: hidden;
    height: 100%;
}

.centered_layout{
    position: fixed;
    inset: 0;
    overflow: auto;

    display: grid;
    place-items: center;
}

<div class="centered_layout">
    Centered app
</div>

Answered By - Niels Prins