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

Question

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

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

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

编辑：为了让问题更清晰明确，我需要一种简单的方法来使元素的中心对齐。

- ArneHugo

Answer 1

有不同的方法来实现这个，但我发现最简单的方法是对绝对定位的元素进行以下操作：

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

使用这种方法，您不需要知道元素的大小。

它是如何工作的？

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

为了使其正常工作，父元素必须与按钮具有相同的宽度。我已经使用一个包含按钮和绝对定位元素的父元素，以便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/

- ArneHugo

---

我自己要想明白这个问题肯定需要很长时间。 - Andrew Koper

Answer 2

个人而言，我会使用 CSS 来设置对象的大小，如果它在容器中。 如果您的主要元素是容器的 100％ 宽度，并且两个子项可以设置为 margin 0 auto，这将强制它们居中于容器。 CSS 示例： #container{ width: 100%; }

#Main{width:100%}

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

HTML 示例

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

这是我能想到的最简单的选项，希望能有所帮助。

- Matthew Prince

---

像这样：https://jsfiddle.net/？不起作用，因为您无法在使用`position: absolute的元素上使用margin: auto`进行居中。https://dev59.com/d2kw5IYBdhLWcg3wSorA#9998303 - ArneHugo

抱歉，您不能在绝对定位上使用它。但是您可以使用左侧50％，但这将使绝对定位到中心的左侧，因此您需要计算绝对值的长度并从左侧值中减去该长度，或者转换绝对值以使其在左侧后自动居中，后者更容易。我通常不使用绝对定位，而是将其相对于容器进行定位，因为我发现这样更容易管理和操作。 - Matthew Prince

是的，通常情况下使用正常位置确实更容易，并且应该尽可能使用。但是，有时候需要使用 position: absolute 来覆盖其他元素而不占用空间，这可能会导致其他元素移动。可以使用 calc(50% - halfWidthOfAbsPosElement)，但是您需要知道绝对定位元素的宽度。此外，calc() 仍处于实验阶段。更简单的方法是使用 left: 50%; transform: translateX(-50%);，请参见我的答案以了解其工作原理。 - ArneHugo