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

Question

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

用法示例:单击时打开/显示新(绝对定位)元素的日期选择器.

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

编辑:为了说清楚,我正在寻找的是一种简单的方法,使元素的中心对齐.

Answer 1

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

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

使用这种方法,你就不会需要知道大小的两个元素中.

它是如何工作的？

将left: 50%在祖先元素的中间位置(此处100%是祖先元素的大小).在transform: translateX(-50%)使中心的绝对定位的元素的从哪里来它的左拐角处,否则将(本文中100%是绝对定位的元素的宽度).

为了使这项工作,父元素与按钮具有相同的宽度也很重要.我使用了一个父元素来包含按钮和aboslutely定位元素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%);
    }
  }
}

小提琴:https://jsfiddle.net/y4p2L9af/1/