Vertical Align text inside a composition to be vertically responsive at browser resize

Question

I am trying to make two compositions that are vertically responsive at browser resize. I have an example here and I am using Adobe Muse.

The red box and blue box is what I am trying to achieve in terms of responsive when you resize the browser vertically. The green square is a composition that has no text in it and it behaves as it should. However, when I add text, it happens what you see in the dark blue button with text. How can I make the text inside the composition vertically centered and still behave like the green, red or blue box?

The code I added so far for all of them is:

<style>
.redbox {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
.bluebox {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
.green-button {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
.darkblue {
display: block;
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
</style>

Thank you!!!

Answer 1

If I have understood correctly, you want to center text on a div regardless of the div height. You can do it with flexbox, or with absolute positioning.

I recommend the first option. with a display: flex and align-items: center; in div, it would be enough to center the contents inside the container.

However, if the text is too long, you should add mediaquerys to change the font size to adapt it to the screen size, or at a certain minimum height, set the height of the divs fixed with min-heigh in pixels, for example.

Example flexbox and absolute positioning

Edit

So you are looking for something like this:

Example

Answer 2

what you want is called "Responsive Grid" here you can find more about it:

https://www.w3schools.com/cSS/css_rwd_grid.asp

https://purecss.io/grids/

https://www.creativebloq.com/how-to/create-a-responsive-layout-with-css-grid

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout

and for vertically centering things :

https://www.w3.org/Style/Examples/007/center.en.html

https://www.w3schools.com/css/css_align.asp

https://css-tricks.com/centering-css-complete-guide/

flex is something rather relatively new (IE11.0+) so if you want it cross browser then forget about it for now.

html, body {
  background:#333;
  height:100%;
 }
 .grid {
   box-sizing: border-box;
   padding:12.5%;
 }
 .grid > div {
   float:left;
   box-sizing: border-box;
   width:33.33%;
   height: 50vh;
   line-height:50vh;
   text-align:center;
 }
 .red {
   background:red;
 }
 .green {
   background:green;
 }
 .blue {
   background:blue;
 }
  .orange {
   background:orange;
 }
 .white {
   background:white;
 }
 .brown {
   background:brown;
 }
 .brown > span {
   display:inline-block;
   line-height:12px;
 }

<div class="grid">
<div class="red">
  Some Text here
</div>
<div class="green">
  Some Text here
</div>
<div class="blue">
  Some Text here
</div>
<!-- next row -->
<div class="orange">
  Some Text here
</div>
<div class="white">
  Some Text here
</div>
<div class="brown">
  <span>This can be longer text or even multiple lines</span>
</div>
</div>