You are here

front end

How to vertically center text in an absolutely-positioned div over an image

(Note that this technique is totally deprecated by Flexbox and CSS Grid, but it's interesting for historical purposes, I guess).

If you've ever tried to do it, you know that vertically centring elements in CSS is notoriously difficult. Horizontal centring is a relative breeze, but vertical is another story.

I often have a use-case where I want to vertically centre some text on top of an image, say for a site banner. For example:

Vertically centred text on banner image