I'm in the process of developing an application using Bootstrap 4. The app features a navigation bar and a container located beneath it. Below you'll find the structure of the application:
<body>
<div id="root">
<div>
<nav id="navbar" class="navbar navbar-expand navbar-dark bg-dark">
<div id="logo" title="App"/>
<button aria-controls="navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
<span class="navbar-toggler-icon"/>
</button>
<div class="navbar-collapse collapse" id="navbar-nav" style="--logoHeight:68px;">
<div class="mr-auto navbar-nav">
<a href="/home" class="nav-link">Menu</a>
</div>
</div>
</nav>
<div class="mt-2 container-fluid">
<div>
<div class="d-flex align-items-center vh-100">
<div class="container" id="theContainerToCenterVertically">
</div>
</div>
<span/>
</div>
</div>
</body>
My objective is to center vertically the div with the ID "theContainerToCenterVertically". Although the current code achieves this, it causes a scrollbar to appear even if the content can fit on one page. I would like to know how to center the div vertically without triggering a scrollbar when the content fits on a single page.