tech @ Beacon Deacon

Dynamic, Vertical Center over an Image

Jamie Johnson, December 5, 2019

Look at the picture above with the text vertically centered on top of it. Guess what? It works at different resolutions. We all know the pain of vertically centering an element over another one when mobile resolutions are a consideration (and they should be). In the desktop-resolution-only days, one just needed a table cell with valign equalling center. Then later one could use CSS for display: table-cell and vertical-align: center. However, that doesn't account for the "background" image. People have come up with all sorts of tricks to accomplish this and others have just manually made their best shot.

I'd like to offer my solution. It dynamically centers an element vertically over an image while allowing that image to be fluid with the resolution for adaptive/responsive behavior while maintaining the vertical centering of the element. Resize this screen to see how it works above, but make sure to pause after a resize so it can respond.

A couple things to keep in mind:

tech @ Beacon Deacon