水平居中绝对定位元素位于另一个元素中心下方

如何使绝对定位的元素居中于另一个元素的中心下方？

使用示例：单击时打开/显示新（绝对定位）元素的日期选择器。

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

编辑：为了清楚起见，我正在寻找一种使元素中心对齐的简单方法。

有不同的方法可以做到这一点，但我发现最简单的方法是对绝对定位元素执行以下操作：

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

使用这个方法你可以not需要知道任一元素的大小。

它是如何工作的？

The left: 50%将其放置在祖先元素的中间（这里100%是祖先元素的大小）。 这transform: translateX(-50%)使得center绝对定位元素的宽度位于其左角的位置（这里 100% 是绝对定位元素的宽度）。

为了使这项工作正常进行，父元素与按钮具有相同的宽度也很重要。我使用父元素来包含按钮和绝对定位的元素 i ，以便top: 0位于按钮正下方。

简化的 HTML：

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

简化的 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/ https://jsfiddle.net/y4p2L9af/1/