Posted almost 7 years ago. Visible to the public. Linked content. Deprecated.

CSS: Vertically center with margin: auto

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.

Check out the jsFiddle Demo.

CSS

Copy
.absoluteCenterWrapper { position: relative; /* Declare this element as the anchor point for centering */ } /* Positioning */ .absoluteCenter { margin: auto; /* Required */ position: absolute; /* Required */ top: 0; bottom: 0; /* Aligns Vertically */ left: 0; right: 0; /* Aligns Horizontally */ } /* Make sure the centered element fits into its container. If you know that's the case, you can omit this part. */ .absoluteCenter { max-height: 100%; max-width: 100%; }

HTML

Copy
<div class="absoluteCenterWrapper"> <img src="PATHTOIMAGE" class="absoluteCenter"> <p>Paragraph goes here.</p> </div>

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:

Avatar
Martin Straub
Last edit:
almost 4 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 Martin Straub to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more