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

Question

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

使用示例：一个日期选择器，opens/shows 一个新的（绝对定位的）元素被点击。

        .         <-- 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 位于左角所在的位置（这里 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/

Answer 2

我个人会使用 css 如果对象在容器中，您可以设置对象的大小如果您的主要元素是容器宽度的 100%，并且可以将两个子项设置为具有 margin 0 auto，这将迫使它们位于容器的中心 css 如：＃容器{ 宽度：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>

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

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

Horizontally center absolute positioned element below the center of another element

css

css-position

它是如何工作的？

简化html:

简化less/scss