How to vertically align a div within another div

Question

I have tried many different techniques in order to vertically align a div to the bottom of another div, does anybody have any idea as to how I could do this? I have tried a lot of things, but nothing seems to be working! :(

<div class="containerBlog"> 
    <div class="infoBlog">
    </div>
</div>

The inner div is a cricle in my code.

Answer 1

CSS:

.containerBlog { position:relative; }
.infoBlog { position:absolute; }

JS:

var container = document.querySelector(".containerBlog");
var info = document.querySelector(".infoBlog");

var cHeight = container.offsetHeight;
var iHeight = info.offsetHeight;

var top = cHeight / 2 - iHeight / 2;

info.setAttribute("style", "top:" + top + "px");

Try something like that?

Wait, I totally misunderstood your question. you simply want to position the div to the bottom of the parent?

Simply absolutely position it so.

CSS:

.containerBlog { position:relative; }
.infoBlog { position:absolute; bottom:0; }

Answer 2

You could use the display table and vertical align technique in your css

.containerBlog {
  display:table;
  vertical-align:middle;
 }
.infoBlog {display:table-cell;}