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

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

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

使用这种方法 不 需要知道任何一个元素的大小。

它是如何工作的?

这个 left: 50% 将其放置在祖先元素的中间(这里100%是祖先元素的大小)。 这个 transform: translateX(-50%) 使 居中 绝对定位的元素的左角将位于其左角的位置(这里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%);
    }
  }
}

小提琴: https://jsfiddle.net/y4p2L9af/1/

就我个人而言,如果对象在容器中,我会使用css来设置对象的大小 如果您的主元素是容器宽度的100%,并且两个子项可以设置为自动边距0,这将迫使它们位于容器的中心 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>

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