Hacker News Reader

This also relies on a container DIV (".overlay"). So Flexbox doesn't help here.

What exactly is your centered div centering to if there's no container div? The .overlay div is the container, the .dialog div is centering itself as defined by constraints of .overlay.

I'm failing to understand your expectations.

Let's say this is a modal dialog which is supposed to appear in the center of the screen, fixed (but the size is unknown and may scale with its contents). With any of the existing solutions, the HTML code for the dialog will always be <div><div>...</div></div>, i.e. unnecessary DIVs due to the limitations of CSS. Since it is supposed to float on top of everything else, it does not matter what its container is. May as well be the <body> tag but applying flexbox to that tag is likely not an option.

But the HTML you describe is required for the modal as you describe it. I guess I'm assuming you want something to darken the body content behind the modal, which is what the first div would be for.

Otherwise, if you don't need the darkening div behind the modal, you can easily create a centered modal with the container being the body tag. Without flexbox. Today.

Again, I don't understand your expectations.

Why is that a problem? In real life you always have a container div.

Reply on news.ycombinator.com