Perfect Center with CSS Transform

The problem with absolute positioning is that elements are moved according to the parent, so they get positioned too far away from the center. It’s not such a problem on a static design, but on a responsive site, things starts to breakdown rather badly.

In this video quick-tip, I show you how to perfectly center an element using the CSS transform and positioning properties.

Here’s the code I used in the video, ready for you to copy and paste:

/* Center with Transform */
.parent-element {
width:600px;
height:400px;
margin:50px auto;
position:relative;
background:#f6f7f8;
}
.child-element {
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
background:#e2e2e4;
}

If you have any questions, please let me know in the comments!

Advertisement


Leave a Comment

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.