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

Question

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

可以使用 flex 布局将覆盖（高度和宽度未知）绝对定位在页面中心吗？

Answer 1

如果元素是绝对定位的，它们就会失去它们的弹性项目状态。为了执行您的建议，您需要绝对定位 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 版本。

Answer 2

就我而言，它以绝对元素为中心。浏览器：Chrome 56.0 https://codepen.io/MarvinX ​​u/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>