Horizontally center absolute positioned element below the center of another element

Question

How can I get an absolute positioned element to be centered below the center of another element?

Example of usage: A date-picker that opens/shows a new (absolutely positioned) element when clicked.

        .         <-- Center
      [ . ]       <-- Not absolutely positioned element, a button. Always displayed
  [     .     ]   <-- Absolutely positioned element. Visibility toggled by button

Edit: To make it clear, what I'm looking for is a simple way to make the center of the elements align.

Languid

Answer 1

There are different ways to do this, but I found that the easiest one is to do the following to the abolute positioned element:

  top: 0;
  left: 50%;
  transform: translateX(-50%);

Using this method you do not need to know the size either of the elements.

How does it work?

The left: 50% places it at the middle of the ancestor element (here 100% is the size of the ancestor element). The transform: translateX(-50%) makes the center of the absolutely positioned element come where it's left corner would otherwise be (here 100% is the width of the absolutely positioned element).

To make this work it's also important that the parent element has the same width as the button. I've used a parent element to contain both the button and the aboslutely positioned element i so that top: 0 is directly below the button.

Simplified html:

<span class="container">
  <div class="button">Click Me!</div>
  <div class="relative">
    <div class="absolute">Absolute positioned</div>
  </div>
</span>

Simplified less/scss

.container {
  display: inline-block;

  .button { ... }

  .relative {
    position: relative;

    .absolute {
      position: absolute;

      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

Fiddle: https://jsfiddle.net/y4p2L9af/1/

Languid

Would have taken me forever to figure this out on my own – Amorino

Answer 2

Personaly i would use css you set the size of the object if it is in a container if your main element is 100 % the width of the container and the two sub items can be set to have margin 0 auto this will force them to the center of the container css EG: #container{ width: 100%; }

#Main{width:100%}

div span{
 display:block;
 width: 25px;
 margin:0 auto;
}

html EG

<div id="Container">
    <span id="Main"></span>
    <span class="centered"></span>
    <span class="centered" id="absolute"></span>
</div>

this is the simplest option i could think of hope it helps

Lamond

Like this: jsfiddle.net ? Does not work, as you can't center using margin: auto on an element with position: absolute. https://mcmap.net/q/112206/-css-absolute-position-won-39-t-work-with-margin-left-auto-margin-right-auto – Languid

Apologies. No you cannot use this on the absolute. but you can use the left 50% but this will place the absolute to the left of the center so you need to either calculate the length of the absolute and minus that from the left val or transform the absolute to get it to center itself after the left, the latter being easier. i usually just dont use the absolute value but position it relatively in a container as i find this easier to manage and manipulate. – Lamond

Yes, normal position is easier indeed, and should be used if possible. However, sometimes one needs to use position: absolute in order to just overlay other elements instead of taking up space which may cause other elements to move around. It's possible to use calc(50% - halfWidthOfAbsPosElement), but then you need to know width of the absolute positioned element. Also calc() is still experimental. The simpler way is to use left: 50%; transform: translateX(-50%);, see my answer for an explanation of how it works. – Languid