How to Dead Center Absolutely Positioned Elements in CSS

Use transform: translate with negative values of top and left to dead center an absolutely positioned element in CSS:

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

This will move the element -50% to the top and also -50% to the left. By default, anchor points are set to the top-left corner of an element. To dead center absolutely positioned elements, you need to move them back -50% on both axis. Think of it as setting an anchor point to the center.

Note that you should use the negative values of top and left. For different values, your translate rule should look similar:

.center {
    position: absolute;
    top: 25%;
    left: 30%;
    transform: translate(-25%, -30%);
}

The first parameter of the translate function is used for the x-axis, while the second is used for the y-axis.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Are you not using absolute positioning?

You can also use flexbox, to center an element, with only three lines:

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

• justify-content centers it on the horizontal axis
• align-items centers it along the vertical axis

Another option is to set the line-height to the height of the container:

.center {
    height: 250px;
    line-height: 250px; /* Set the line-height to the same as the height */
}

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

• The CSS transform property
• The translate function in CSS
• justify-content in Flexbox
• align-items in Flexbox