Hello there! I am currently using Bootstrap 4 and the layout I have implemented seems to be working fine as all my pages start from the top. However, now I am trying to center the elements.
<style>
body,
wrapper {
min-height: 100vh;
}
</style>
<body>
<wrapper class="d-flex flex-column">
<nav>
</nav>
<main class="flex-fill">
<div class="container-fluid">
THIS IS THE DIV I'M CURRENTLY TRYING TO CENTER
</div>
</main>
<footer>
</footer>
</wrapper>
</body>
I attempted to change the position using 'top', but that didn't work. What did work was changing the position using 'margin-top' with a specific value in vh, however, this method is not responsive on different screen sizes. I would greatly appreciate any help in finding a responsive solution to vertically centering this div. So far, I've successfully centered the div horizontally using 'row justify-content-center', but vertical centering has proven to be more challenging. Thank you!