Css 在另一个图元的中心下方水平居中绝对定位图元

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

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

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

---

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

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

使用此方法，您不需要知道两个元素的大小

它是如何工作的？
left:50%
将其放置在祖先元素的中间（这里100%是祖先元素的大小）。
transform:translateX（-50%）
使绝对定位元素的中心位于它的左角（这里100%是绝对定位元素的宽度）

为了实现这一点，父元素与按钮具有相同的宽度也很重要。我使用了一个父元素来包含button和一个单独定位的元素I，这样
top:0
就直接位于button的下方

简化html：
Fiddle:
个人而言，如果对象在容器中，我会使用css设置对象的大小
如果主元素是容器的100%宽度，并且两个子项可以设置为自动边距为0，这将迫使它们位于容器的中心
css示例：
#容器{
宽度：100%；
}

html-EG

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



这是我能想到的最简单的选择，希望它能像这样有所帮助：？不起作用，因为无法在位置为绝对的元素上使用
margin:auto
居中。道歉。不，你不能在绝对值上使用这个。但是你可以使用左边的50%，但是这会把绝对值放在中心的左边，所以你需要计算绝对值的长度，减去左边值的长度，或者变换绝对值，使其在左边之后居中，后者更容易。我通常不使用绝对值，而是将其相对放置在一个容器中，因为我发现这更容易管理和操作。是的，正常位置确实更容易，如果可能的话应该使用。但是，有时需要使用
position:absolute
，以便只覆盖其他元素，而不是占用可能导致其他元素移动的空间。可以使用calc（50%的BSPoseElement半宽度），但您需要知道绝对定位元素的宽度。此外，calc（）仍处于实验阶段。更简单的方法是使用
left:50%；转化：translateX（-50%），请参阅我的答案以了解它是如何工作的。我可能会花很长时间独自解决这个问题
.container {
  display: inline-block;

  .button { ... }

  .relative {
    position: relative;

    .absolute {
      position: absolute;

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

#Main{width:100%}

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

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