How to put second content in div block in center

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:

@fnostro I think he meant "free space" as in the red container would be entirely filled by the green and blue containers — AStombaugh, Apr 14 '22 at 18:32

score 1 · Accepted Answer · answered Apr 14 '22 at 18:53

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>

answered Apr 14 '22 at 18:53

Maik Lowrey

15,957
6
40
79

1

Thanks for answer. height: calc(100% - 100px) just Deduct is that what i need; – Peter Shneider Apr 14 '22 at 19:42

Can Oezlemis · Answer 2 · 2022-04-14T18:56:13.857

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>

How to put second content in div block in center

2 Answers2