CSS3 flexbox或flex布局允許輕松地將元素水平和垂直居中，即使其高度和寬度未知。

flex布局可以用來在頁面中央絕對定位一個覆蓋圖(高度和寬度未知)嗎？

如果元素被絕對定位，它們將失去彈性項目狀態。為了實現您的建議，您需要絕對定位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版本中工作。

在我的例子中，它集中了一個絕對元素。瀏覽器:鉻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>