css - 水平居中绝对定位元素低于另一个元素的中心

Question

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

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

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

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

Answer 1

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

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

使用此方法，您不需要知道任何一个元素的大小。

它是如何工作的？

left: 50%放在祖先元素的中间(这里的100%是祖先元素的大小)。transform: translateX(-50%) 使绝对定位元素的 center 出现在左 Angular 原本应该在的位置(这里 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/