How to align inner divs in centre or bottom based on %

Question

In my JS application, I have a panel that is spited in 3 sections each with width: 100% and height:33.33% then in each section I want to have some divs.

• In the middle section, the inner divs must stay in middle vertically and horizontally.
• In the bottom section, the inner divs must stay in the bottom but middle horizontally.

 $(".panel2").hide(); $(".panel1").click(function() { $(this).hide(); $(".panel2").show(); }); $(".panel2").click(function() { $(".panel1").show(); $(this).hide(); }); 

 div.box { width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; position: relative; } div.box > .blur { width: 100%; height: 100%; background: url(http://goo.gl/0VTd9W); -webkit-filter: blur(8px); } div.box > .panel1, div.box > .panel2 { width: 100%; Height: 100%; Background: rgba(0, 0, 0, 0.5); position: absolute; left: 0px; top: 0px; } div.box > .panel2 { background: rgba(255, 0, 0, 0.2); } /** sub sections **/ div.panel1 > .top, div.panel1 > .middle, div.panel1 > .bottom { width: 100%; height: 33.33%; border: 1px dashed #000; } div.middle > div, div.bottom > div { width: 30px; height: 30px; border: 1px dashed #000; float: left; margin: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <div class="blur"></div> <div class="panel1"> <div class="top"></div> <div class="middle"> <div></div> <div></div> <div></div> </div> <div class="bottom"> <div></div> <div></div> <div></div> </div> </div> <div class="panel2">Panel 2</div> </div> 

As you can see I have implemented the divs but cannot align them in the described positions since the parent divs are percentage based.

Any idea to align them?

Answer 1

There are a lot of ways that you can achieve your desire situation such as transform: translate(-50%); , position:absolute and negative margin , display:inline-block; , display: flex; and etc. Here, display:inline-block; is used. You can add one more div( .centered-vertically ), give height:100%; and don't forget remove extra spaces which is occurred by display:inline-block; and finally, use vertical-align property to align them to bottom , middle and top . However, here is completed code.

 $(".panel2").hide(); $(".panel1").click(function() { $(this).hide(); $(".panel2").show(); }); $(".panel2").click(function() { $(".panel1").show(); $(this).hide(); }); 

 div.box { width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; position: relative; } div.box > .blur { width: 100%; height: 100%; background: url(http://goo.gl/0VTd9W); -webkit-filter: blur(8px); } div.box > .panel1, div.box > .panel2 { width: 100%; Height: 100%; Background: rgba(0, 0, 0, 0.5); position: absolute; left: 0px; top: 0px; } div.box > .panel2 { background: rgba(255, 0, 0, 0.2); } /** sub sections **/ div.panel1 > .top, div.panel1 > .middle, div.panel1 > .bottom { width: 100%; height: 33.33%; border: 1px dashed #000; } div.middle > div:not(.centered-vertically), div.bottom > div:not(.centered-vertically) { width: 30px; height: 30px; border: 1px dashed #000; display:inline-block; vertical-align:middle; margin: 10px; } div.bottom > div:not(.centered-vertically) { vertical-align:bottom; } div.middle > .centered-vertically, div.bottom > .centered-vertically { display:inline-block; vertical-align:middle; height:100%; } div.middle { text-align:center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <div class="blur"></div> <div class="panel1"> <div class="top"></div> <div class="middle"> <div class="centered-vertically"></div><div></div><div></div><div></div> </div> <div class="bottom"> <div class="centered-vertically"></div><div></div><div></div><div></div> </div> </div> <div class="panel2">Panel 2</div> </div> 

Answer 2

Flexbox is the simplest solution. Simply add the following rules to your middle and bottom containers:

.middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

codepen