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.

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/