Centering element vertically and responsive

Posted in Tutorials

We want an element inside another element to be centered vertically.  We also want it to be responsive such that when the browser resizes  (and hence the containing element resizes), the inside element still remains centered vertically.

Let’s start out with this HTML with an “tagline” div positioned absolutely inside an “container” div …

When positioned absolute with top=0 and left=0, the tagline will be pinned to the upperleft corner of the container looking like this …

Which at this current time is not centered vertically yet.   If instead, we set top at 50% …

then it will look like this with the top edge of the tagline at the vertical center…

We need to shift tagline up by half its height.  We do this by using CSS transform in the y-direction (2nd parameter) …

Now it looks vertically centered…

And remain so even when the container size or tagline size changes….

And if you want it centered both vertically and horizontally, do for both x and y …

And you get both centered…

 

---