specify height of flexbox other than 100vh - html

Question

I have a form inside a div inside. The div is inside another div.
<div class="div__signup"> <!-- takes the complete width/height of content section -->
<div class="content_div--white"> <!-- contains the form. Adjust this div to create a border around the form -->
<form class="signup-form" actions="">
<label for="firstname" class="first-name">First Name</label>
<input id="firstname" type="text">
<label for="lastname" class="last-name">Last Name</label>
<input id="lastname" type="text">
<label for="email" class="email"> Email</label>
<input id="email" type="email">
<label for="password" class="password">Password</label>
<input id="password" type="password">
<label for="verify-password" class="verify-password">Verify Password</label>
<input id="verify-password" type="password">
</form>
</div>
</div>
This html is inside a css-grid which has 3 rows - navigation, content and footer.
.css-grid-container{
height:100vh; /*???*/
display: grid;
grid-gap:20px;
grid-template-columns: 1fr; /* 1 columns*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row (content) is 15 times larger than the 3rd row (footer).*/
}
I want the html of the form page to be at the center of the content section of the css-grid. If I use flexbox, I suppose I have to provide specific height for the flexbox. The only height parameter I know is 100vh which equals height of the viewport.
.div__signup{
display:flex;
align-items: center;
justify-content: center;
height: 100vh; /*need something else than 100vh as I dont want alignment w.r.t viewport */
}
But I want the form to be at the center of the content section of the grid, not the center of the viewport. How could I align the form to the center of the content section?

Answer 1

Based on the fact that .div__signup is a child of a grid item, here are two suggestions:
Using absolute position
.css-grid-item {
position: relative;
}
.div__signup {
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
Make the grid item a flex container
.css-grid-item {
display: flex;
align-items: center;
justify-content: center;
}
Do note, sample 2 may, or may not work, based on how the justify-content/align-items is set on the css-grid-item.
Assumed HTML
<div class="css-grid-item">
<div class="div__signup"> <!-- takes the complete width/height of content section -->
<div class="content_div--white"> <!-- contains the form. Adjust this div to create a border around the form -->
<form class="signup-form" actions="">
<label for="firstname" class="first-name">First Name</label>
<input id="firstname" type="text">
<label for="lastname" class="last-name">Last Name</label>
<input id="lastname" type="text">
<label for="email" class="email"> Email</label>
<input id="email" type="email">
<label for="password" class="password">Password</label>
<input id="password" type="password">
<label for="verify-password" class="verify-password">Verify Password</label>
<input id="verify-password" type="password">
</form>
</div>
</div>
</div>

Answer 2

See this I use display fixed, table and table cell
.seline-preloader {
position: fixed;
left: 0px;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: #ffffff;
display: block;
box-sizing: border-box;
}
.table {
display: table;
width: 100%;
height: 100%;
background-color: transparent !important;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table-cell {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
<section class="seline-preloader">
<div class="table">
<div class="table-cell">
<h2 class="hide">Form</h2>
<!--start of your code-->
<div class="div__signup">
<!-- takes the complete width/height of content section -->
<div class="content_div--white">
<!-- contains the form. Adjust this div to create a border around the form -->
<form class="signup-form" actions="">
<label for="firstname" class="first-name">First Name</label>
<input id="firstname" type="text">
<label for="lastname" class="last-name">Last Name</label>
<input id="lastname" type="text">
<label for="email" class="email"> Email</label>
<input id="email" type="email">
<label for="password" class="password">Password</label>
<input id="password" type="password">
<label for="verify-password" class="verify-password">Verify Password</label>
<input id="verify-password" type="password">
</form>
</div>
</div>
<!--end of your code-->
</div>
</div>
</section>
jsfiddle