是否可以使用 flex 布局将绝对定位的元素居中？答案

【问题标题】：Is it possible to use the flex layout to center an absolutely positioned element?是否可以使用 flex 布局将绝对定位的元素居中？
【发布时间】：2013-05-21 10:45:05
【问题描述】：

CSS3 flexbox 或 flex 布局允许轻松地将元素水平和垂直居中，即使它的高度和宽度未知。

是否可以使用 flex 布局将叠加层（高度和宽度未知）绝对定位在页面中心？

【问题讨论】：

到目前为止你尝试过什么代码？

标签： css centering absolute flexbox

【解决方案1】：

元素在绝对定位时会失去其 flex item 状态。为了执行您的建议，您需要绝对定位 flex 容器：

http://codepen.io/cimmanon/pen/prFdm

.foo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bar {
  margin: auto;
}

<div class="foo">
  <div class="bar">Bar</div>
</div>

请注意，我省略了 moz 2009 Flexbox 前缀，因为绝对定位会破坏 Firefox 中的 flex 容器。它应该在具有标准 Flexbox 属性的 Firefox 版本中正常工作。

【讨论】：

这实际上回答了我的问题，但是......我对这个解决方案的问题是容器覆盖了整个页面，这意味着所有底层链接都停止工作（不仅是覆盖层底层的那些本身）。你知道避免这种情况的方法吗？
这是绝对定位的限制。您可以修改 z-index，但不能将 .foo 放在其他元素下方，同时将 .bar 放在顶部。如果没有确切了解您要达到的效果，很难进一步提供建议。
是的，这就是我尝试过的，即修改z-index，但我找到了你刚才所说的。我想要做的是祝酒词，如 Android 祝酒词 (developer.android.com/guide/topics/ui/notifiers/toasts.html)，但我想将它垂直居中放置在屏幕上，并且祝酒词未覆盖的任何底层链接、按钮等都应保持活动状态.
这只适用于水平居中（我已经看到了为什么 top 不适用于相对元素的百分比的答案，但我仍然不明白原因，stackoverflow.com/q/9774320/974795）。此外，居中元素中的自动换行（在我的情况下为覆盖）就像它在被相对定位移动之前被显示一样（即，就像左上角在页面的中心一样），这意味着一旦居中，右侧（和左侧）边距等于相对移动的长度（即居中元素的 50%）。

【解决方案2】：

在我的例子中，它以绝对元素为中心。浏览器：Chrome 56.0 https://codepen.io/MarvinXu/pen/WjprpL

.flexbox {
      display: flex;
      height: 200px;
      align-items: center;
    }
    
    .abs {
      position: absolute;
      right: 0;
    }

<div class="flexbox">
    <span>inline</span><span class="abs">position:absolute</span>
  </div>

【讨论】：