9

The CSS3 flexbox, or flex, layout allows to easily center an element horizontally and vertically even when its height and width are unknown.

Can the flex layout be used to absolutely position an overlay (of unknown height and width) in the center of a page?

Xavi
  • 553
  • 1
  • 7
  • 11

2 Answers2

7

Elements lose their flex item status if they are absolutely positioned. In order to do what you're suggesting, you need to absolutely position the flex container:

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>

Note that I've omitted the moz 2009 Flexbox prefixes because absolute positioning breaks flex containers in Firefox. It should just work in Firefox versions with the standard Flexbox properties.

cimmanon
  • 62,582
  • 13
  • 151
  • 162
  • This actually answers my question, but... the problem that I have with this solution is that the container covers the entire page, which means that all underlying links stop working (not only those underlying the overlay itself). Do you know a way to avoid this? – Xavi May 26 '13 at 19:53
  • That's a limitation of absolute positioning. You can modify the z-index, but you won't be able to put .foo below the other elements while keeping .bar on top. Without seeing exactly what effect you're going after, it is difficult to advise further. – cimmanon May 26 '13 at 20:16
  • Yes, that's what I tried, i.e. to modify the z-index, but I found what you just said. What I'm trying to do is a toast, like Android toasts (http://developer.android.com/guide/topics/ui/notifiers/toasts.html), but I want to center it vertically in the screen, and any underlying links, buttons, etc. which are not covered by the toast should remain active. – Xavi May 26 '13 at 22:04
  • That only works to center horizontally (I've seen the answer for why top doesn't work with percentages for relative elements, but I still don't see the reason, http://stackoverflow.com/q/9774320/974795). Besides, the automatic line wrapping in the centered element (the overlay in my case) is done as if it were being displayed before it's moved by the relative positioning (i.e. as if the top-left corner were in the center of the page), which means that once centered there's a right (and left) margin equal to the length of the relative move (i.e. 50% of the centered element). – Xavi May 27 '13 at 11:28
3

in my case it centered an absolute element. browser: Chrome 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>
Marvin Xu
  • 43
  • 4