css - フレックス レイアウトを使用して、絶対配置された要素を中央に配置することは可能ですか?

Question

CSS3 フレックスボックス (フレックス) レイアウトを使用すると、要素の高さと幅が不明な場合でも、要素を水平方向と垂直方向に簡単に中央揃えにすることができます。

フレックス レイアウトを使用して、(高さと幅が不明な) オーバーレイをページの中央に絶対に配置できますか?

Answer 1

要素が絶対配置されている場合、要素はフレックス アイテムのステータスを失います。あなたが提案していることを行うには、フレックスコンテナを絶対に配置する必要があります:

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 で絶対配置がフレックス コンテナーを壊すためです。標準のFlexboxプロパティを備えたFirefoxバージョンでのみ機能するはずです。