![Joe Medley](https://web.dev/images/authors/joemedley.jpg) Joe Medley [GitHub](https://github.com/jpmedley)

<br />

A previous version of the
[CSS Flexible Box](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications)
Layout specification set the static position of absolute-positioned children as
though they were a flex item whose size is 0px by 0px. The
[latest version of the spec](https://drafts.csswg.org/css-flexbox/#abspos-items)
takes them fully out of flow and sets the static position based on align and
justify properties. At the time of this writing, Edge and Opera 39 for desktop
and Android already support this.

For an example, let's apply some positioning behaviors to the following HTML.

```html
<div class="container">
    <div>
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
    </div>
</div>
```

We'll add something like this:

```css
.container {  
    display: flex;  
    align-items: center;  
    justify-content: center;   
}  
.container > * {  
    position: absolute;  
}
```

In Chrome 52 or later, the nested `<div>` will be perfectly centered in the
container `<div>`.
![Chrome52 behavior.](https://developer.chrome.com/static/blog/absolute-positioned-children/image/chrome52-behavior-a9732de719c23.png)

In non-conforming browsers, the top left corner of the green box will be in the
top center of the red box.
![Legaci behavior.](https://developer.chrome.com/static/blog/absolute-positioned-children/image/legaci-behavior-7e9b1c90d8d8f.png)

If you want to try this for yourself in Chrome or any other browser,
[download our sample](https://github.com/GoogleChrome/samples/tree/gh-pages/css-flexbox-abspos)
or visit the [live demo](https://googlechrome.github.io/samples/css-flexbox-abspos/index.html).