Last Updated: February 25, 2016
·
1.444K
· ssteynfaardt

Automatically center responsive elements!

Info

Midway.js makes it super easy to automatically center the responsive elements on your websites. You all know and love the absolute positioning centering technique, but what happens when those centered elements change sizes, due to percentage based layouts? That's where Midway.js comes in.

Download & Usage

Download Midway.js using the link above, and place it in the root directory of your site. Then place the following right before </head>

<script type="text/javascript" src="midway.min.js"></script>

Depending on if you want your element to be centered horizontally, vertically, or both, add the following classes.

<div class="centerHorizontal centerVertical"></div>

That's it!

Example

http://shipp.co/midway/example.html

1 Response
Add your response

There's something I do not understand.

The trick on the absolute positioning centering technique is to use a negative margin equal to the half of the element width.

If the the element width is set on percentage, why not to use half of this percentage?

.inner-element {
    position: absolute;
    left: 50%;
    width: 32%;
    margin-left: -16% /* width/2 */;
}
over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip