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%)使绝对定位元素的 center 到达左角的位置（此处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/

Answer 2

Personaly我会使用css你设置对象的大小，如果它在容器中如果您的主要元素是容器宽度的100％，并且可以将两个子项设置为具有0自动边距，则会强制它们到容器的中心 css EG：＃容器{ 宽度：100％; }

#Main{width:100%}

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

html EG

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

这是我能想到的最简单的选择希望它有所帮助

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

2 个答案:

它是如何运作的？

简化的html：

简化为less / scss