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

Question

CSS3 flexbox或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版本.