0
<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:

enter image description here

Peter Shneider
  • 73
  • 6

3 Answers3

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>
Maik Lowrey
  • 10,972
  • 4
  • 14
  • 43
0

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>
AStombaugh
  • 1,601
  • 8
  • 19
  • 1
    Parent block must have height 100%, ths is important. – Peter Shneider Apr 14 '22 at 18:37
  • @PeterShneider I modified my answer, apologies for misreading that part. I've updated my code to reflect the change – AStombaugh Apr 14 '22 at 18:37
  • Height of blue box unknown. – Peter Shneider Apr 14 '22 at 18:55
  • @PeterShneider Can you clarify? Does the height not matter and it just needs to fit the content? If so you could replace the `height` attribute in the `.blueBlock` class with `padding:` attribute to create space around your content and adjust the values as needed. Or does it need to be a specific size and you're just not sure what the size is? – AStombaugh Apr 14 '22 at 19:01
0

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>
Can Oezlemis
  • 169
  • 1
  • 9