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

时间:2013-05-26 10:57:17

标签: css centering absolute flexbox

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

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

2 个答案:

答案 0 :(得分:5)

如果元素位于绝对位置,则会丢失弹性项目状态。为了做你想要的,你需要绝对定位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版本中正常工作

答案 1 :(得分:3)

在我的情况下,它集中了一个绝对元素。浏览器:Chrome 56.0 https://codepen.io/MarvinXu/pen/WjprpL

&#13;
&#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;
&#13;
&#13;