Assume there is a main menu followed by three rows. The first row should be at the top and the third at the bottom, while the second row needs to be centered both vertically and horizontally.
As you scroll down, the main menu should be able to hide while ensuring everything else fits on the page.
I've explored this, I'm familiar with justify-content-center, and I experimented with this. However, I am struggling to bring it all together.
The second row is centered vertically but it increases in height, causing it to lose proper horizontal alignment.
Here's what I have attempted so far:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
html, body, {
height: 100%;
}
.header {
float: left;
width: 100%;
}
.full {
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="nav">
<div class="container-fluid navbar-main">
<nav class="navbar navbar-expand-md no-padding navbar-main">
<div class="container">
<a class="navbar-brand" href="#">Main menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/" role="button">Start</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col header">
<span id="score">first row </span>
</div>
</div>
<div class="row justify-content-center vertical-center" style="height:100%">
<!-- div to center -->
<div class="col-auto">
<span id="operand1">text</span>
</div>
<div class="col-auto">
<span id="operator">text</span>
</div>
<div class="col-auto">
<span id="operand2">text</span>
</div>
<div class="col-4">
<span id="operand2">text</span>
</div>
</div>
</div>
</body>
</html>