display: table-cell; ? No, it will not work as you expect in cases where absolute positioning is involved.
Actually, there is a very easy way to vertically center align elements and once you see how easy it is, you’ll never use anything else for this task. CSS3
transform property will do the job for us. Here is a pen I made for you to demonstrate the vertical center aligning with CSS3
Basically, what we’ll do here is to apply
top:50%; in the child element (with class name
.child in the demonstration), so that it starts from half-way down along the variable height of the parent element (with class name
.parent in the demonstration). And then, we’ll push it up half the size of its own height using
transform:translateY(-50%); with all browser specific prefixes, so that the vertical centers of both parent and child are in the same position.
One thing I need to mention here is that it will not work for IE 8 or earlier. But then again, it is 2015, right? 🙂 Hope this trick help you in some projects.