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

Question

<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

Based on the image you provided of your desired outcome, this is how I would approach it:

First, change the styles into CSS classes because inline styling gets messy and hard to work with. Apply those classes to the appropriate <div>s. You will need to set an actual height value to the blue container if you want it to fill in the remainder of the parent container.

There are many ways to format the text to display centered vertically and horizontally (see: https://www.w3schools.com/css/css_align.asp) but I used the positional attributes to do so. You can try various methods and use whichever your most comfortable with.

.parentContainer {
  display: block;
  height: 100%;
  background-color: red;
}

.greenBlock {
  display: block;
  height: 100px;
  background-color: green;
}

.blueBlock {
  position: relative;
  display: block;
  text-align: center;
  justify-content: center;
  height: 500px;
  margin: 0 auto;
  background-color: blue;
}

h1 {
  margin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parentContainer">
  <div class="greenBlock">
  </div>
  <div class="blueBlock">
    <h1>Content</h1>
  </div>
</div>

Answer 3

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>