Posted over 6 years ago. Visible to the public. Linked content. Deprecated.

Vertical align anything with just 3 lines of CSS

We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

See attached link. The gist is:

.element { position: relative; top: 50%; transform: translateY(-50%); }

Works in all web browsers and IE9+.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Henning Koch
Last edit:
over 3 years ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more