Perfect Center with CSS Transform [Video]

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 question, please let me know in the comments!

Follow IP on Twitter Like IP on Facebook

Advertisement