center-with-transform-thumb

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