Vertically align absolutely positioned element with flexbox

Question

I have a div that is absolutely positioned.

I'm trying to vertically align it with flex:

.container{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    ....

HTML:

<div class="container">
    <div>
        <p>hello</p>
        <p>to</p>
        <p>you</p>
        ...

Is this possible? How else can I vertically align .container? Please note, I do not wish to use the stretching method.

 position: absolute;
 top: 0;
 bottom: 0;
 left:0;
 right:0;
 margin: auto;

Also the container could be of any height.

p.s. no tables please.

Answer 1

To center the .container element with flex, you need to make the parent a flex container.

The justify-content and align-items properties are declared on a flex container, but apply to child elements (flex items).

However, since .container is absolutely positioned, flex won't work:

An absolutely-positioned child of a flex container does not participate in flex layout.

As an alternative, you can try this:

html { height: 100%; }

body {
   height: 100%;
   position: relative;
}

.container {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

For an explanation of this centering method see this post:

• Element will not stay centered, especially when re-sizing screen