Read more

CSS: Vertically center with margin: auto

Martin Straub
March 26, 2014Software engineer at makandra GmbH

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 Show archive.org snapshot .

CSS

.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

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

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot
Posted by Martin Straub to makandra dev (2014-03-26 14:49)