Czy można użyć układu flex, aby wyśrodkować absolutnie pozycjonowany element?

Question

Flexbox CSS3, czyli flex, umożliwia łatwe centrowanie elementu w poziomie i pionie, nawet gdy jego wysokość i szerokość są nieznane.

Czy można użyć układu flex, aby całkowicie umieścić nakładkę (o nieznanej wysokości i szerokości) na środku strony?

Answer 1

Elementy tracą swój element flex status, jeśli są ustawione absolutnie. W tym celu co ty sugerujesz, należy bezwzględnie umieścić elastycznego pojemnika:

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> 

Zauważ, że mam pominął schematu flexbox prefiksy moz 2009 ponieważ pozycjonowanie bezwzględne łamie flex kontenerów w Firefoksie . To powinno być po prostu pracować w wersjach Firefox ze standardowymi właściwościami Flexbox.

Answer 2

w moim przypadku był to element absolutny. Przeglądarka: 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>