All geek questions in one place

Is it possible to use a flexible circuit to center an absolutely positioned element?

CSS3 flexbox, or flex, layout makes it easy to center an element horizontally and vertically, even when its height and width are unknown.

Is it possible to use flexible layout for the absolute location of the overlay (unknown height and width) in the center of the page?

+6
source share
2 answers

Elements lose the status of a flexible element if they are absolutely positioned. To do what you offer, you need to completely place 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 omitted the moz 2009 Flexbox prefixes because absolute positioning breaks flex containers in Firefox. It should only work on versions of Firefox with standard Flexbox properties.

+4
source

in my case, he centered the 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>
+3
source

Source: https://habr.com/ru/post/945866/

More articles:


All Articles