How to Center an Absolutely Positioned Element Using CSS

    Craig Buckler
    Craig Buckler
    Share
    This article was written in 2010 and remains one of our most popular posts. If you’re keen to learn more about CSS techniques, you may find this recent article on Selectors Level 4 in CSS of great interest.
    Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solution seems obvious once I’ve done it, but I still find myself googling the problem every few months. Horizontally centering a static element in CSS is normally handled by setting the left and right margins to auto, for example:
    .myelement {
      margin: 0 auto;
    }
    However, this won’t work on an absolutely positioned element. Its location is determined in relation to the most immediate parent element that has a position value of absolute, relative
    , or fixed. In the following example, the relative red square has a width set to 40% of the available space. The top-left of the absolutely positioned blue square is positioned 30px across and 10px down:
    .outer {
      position: relative;
      width: 40%;
      height: 120px;
      margin: 20px auto;
      border: 2px solid #c00;
    }
    
    .inner {	
      position: absolute;
      width: 100px;
      height: 100px;
      top: 10px;
      left: 30px;
      background-color: #00c;
    }
     
    If we’re not concerned about the exact dimensions of our blue box, we could omit the width
    setting and set the same left and right values. This would effectively center our blue box:
    .outer {
      position: relative;
      width: 40%;
      height: 120px;
      margin: 20px auto;
      border: 2px solid #c00;
    }
    
    .inner {
      position: absolute;
      height: 100px;
      left: 30px;
      top: 10px;
      right: 30px;
      background-color: #00c;
    }
     
    So, how can we center our box if it has fixed dimensions? The answer requires a little lateral thinking:
    1. First, we use left: 50%. Unlike background image positions, this will move the left-hand edge of the blue box to the center.
    2. Since our box is too far to the right, we use a negative left margin that’s half the box’s width. In our example, we must set margin-left to -50px to shift the box back to the right place.
    Here is the code:
    .outer {
      position: relative;
      width: 40%;
      height: 120px;
      margin: 20px auto;
      border: 2px solid #c00;
    }
    
    .inner {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 10px;
      left: 50%;
      margin-left: -50px;
      background-color: #00c;
    }
     
    The blue box will remain centered no matter how the width of the outer element changes. If you enjoyed reading this post, you’ll love SitePoint Premium; the place to learn fresh skills and techniques from experienced developers. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like CSS Master. Comments on this article are closed. Have a question about CSS? Why not ask it on our forums?

    Frequently Asked Questions (FAQs) on Centering an Absolute Div Element in CSS

    What is the significance of using the position property in CSS?

    The position property in CSS is a fundamental concept that allows you to control the layout of an element. It can take five different values: static, relative, fixed, absolute, and sticky. Each of these values has a unique impact on the positioning of an element. For instance, an element with an absolute position is positioned relative to the nearest positioned ancestor. This means it can be moved anywhere within its containing element, making it a powerful tool for creating flexible, responsive designs.

    How can I center an absolute div both vertically and horizontally?

    To center an absolute div both vertically and horizontally, you need to use a combination of CSS properties. First, set the position of the div to absolute. Then, set the top and left properties to 50%. This will move the top-left corner of the div to the center of its container. However, to truly center the div, you need to offset the div by half of its height and width. This can be done by setting the transform property to translate(-50%, -50%).

    Why is my absolute div not centering correctly?

    If your absolute div is not centering correctly, there could be several reasons. One common issue is that the parent element is not positioned. Remember, an absolute element is positioned relative to its nearest positioned ancestor. If no such ancestor exists, it will be positioned relative to the initial containing block. Another issue could be incorrect values for the top, left, or transform properties. Make sure these are set correctly to ensure proper centering.

    Can I center an absolute div without knowing its dimensions?

    Yes, you can center an absolute div without knowing its dimensions. This is one of the advantages of using the transform property. By setting the top and left properties to 50% and the transform property to translate(-50%, -50%), you can center the div regardless of its size. This is because the translate value is based on the size of the element itself, not its parent.

    How does the transform property work in CSS?

    The transform property in CSS allows you to rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. When you use the translate function with the transform property, it moves an element from its current position in the direction and distance specified by the parameters. For example, translate(-50%, -50%) moves the element left by 50% of its width and up by 50% of its height.

    What are the alternatives to centering an absolute div in CSS?

    While using the position and transform properties is a common method to center an absolute div, there are alternatives. One such method is using flexbox. By setting the display property of the parent element to flex and using the align-items and justify-content properties, you can easily center the div. Another method is using grid layout, which provides even more control over the alignment of elements.

    How can I center multiple absolute divs within a parent element?

    To center multiple absolute divs within a parent element, you can use the same method as for a single div. However, you need to be aware that all the divs will be stacked on top of each other in the center of the parent. To arrange them side by side, you can use the flexbox layout on the parent element and set the position of the divs to static or relative.

    Can I use the margin property to center an absolute div?

    Yes, you can use the margin property to center an absolute div, but it requires knowing the dimensions of the div. By setting the top and left properties to 50% and subtracting half of the div’s height and width from these values using negative margins, you can center the div. However, this method is less flexible than using the transform property, as it requires fixed dimensions.

    How does absolute positioning affect the flow of the document?

    Absolute positioning removes an element from the normal document flow. This means it no longer affects the position of other elements. Instead, it is positioned independently of other elements, based on its nearest positioned ancestor or the initial containing block. Other elements will behave as if the absolute positioned element does not exist, which can sometimes lead to overlapping.

    How can I prevent an absolute div from overlapping other elements?

    Overlapping can be a common issue with absolute positioning. One way to prevent this is by using the z-index property, which controls the stacking order of elements. An element with a higher z-index will be displayed on top of an element with a lower z-index. However, this does not prevent the overlap; it merely controls which element is on top. To prevent overlap entirely, you may need to adjust the positioning or layout of your elements.