How to put second content in div block in center [duplicate] - html

Question

This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 10 months ago.
<div style="height: 100%; background: red">
<div style="height: 100px; background: green">
</div>
<div style="background: blue;">
<h1>Content</h1>
</div>
</div>
How to put content of blue box to center of free plase of red block.
Parent block must have height 100%.
Like this:

Answer 1

Flex box would be good for this issue.
* {
margin: 0px;
padding: 0px;
}
.h {
height: 100px;
background: green;
}
.m {
background: blue;
color: white;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 100px);
}
<div class="w">
<div class="h">header</div>
<div class="m" >
<h1>Content</h1>
</div>
</div>

Answer 2

You should read about flex-box since it will make your life much easier when it comes to such alignments and I am sure you wont regret it. (https://www.w3schools.com/css/css3_flexbox.asp)
(Additional resource for flex-box, my personal favorite: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Please let me know if this isn't the desired outcome and I will try to fix it according to your request.
.parent {
height: 100%;
background: red;
}
.header {
height: 100px;
background-color: green;
}
.content {
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
<div class="parent">
<div class="header">
</div>
<div class="content">
<h1>Content</h1>
</div>
</div>