Question

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

可以使用弹性布局将叠加（未知高度和宽度）绝对定位在页面中央吗？

Answer 1

如果元素位于绝对位置，则会丢失弹性项目状态。为了做你想要的，你需要绝对定位flex容器：

.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/MarvinXu/pen/WjprpL

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: