Question

I was wondering in someone knows how to vertically center a child div inside a parent div without knowing the parent divs height?

I have a pinterest style gallery page (images) and on hover I show a div over the top of the images with information about the image. Know because each image could have a different height, I don’t know how to center the child content to the middle of the parent div.

I am using jQuery Masonary plugin to create the layout.

Currently I have an outer div containing the image. An inner div with a background colour of white (or whatever) positioned 0,0 and width and height 100%. This all works great and I have been able to center horizontally by simply using text-align: center;

Many thanks!

Answer 1

This should work to set it centered both ways. Did not test yet:

var ParentW = $("parent-id").width();
var ParentH = $("parent-id").height();
var ChildW = $("child-id").width();
var ChildH = $("child-id").height();
var PosW = (ParentW - ChildW)/2;
var PosH = (ParentH - ChildH)/3;
$("child-id").css({"top":PosH, "left": PosW });