Vertically-Centered DIV

A sample demonstrating how using position:absolute to center a DIV vertically breaks document flow. The intention of creating this fiddle is not to state the obvious, but to hopefully draw attention and find a fix for this.

by spikey

HTML

<div id="container">
	<p>Hi lol</p>
</div>
<p>Copyright Notice here</p>

CSS

*
{
    outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}

#container
{
	width: 100%;
	height: 20%;

    position: absolute;
	left: 0%;
	right: 0%;
    top: 40%;
	bottom: 40%;
	
    background-color: khaki;
}

p
{
	text-align: center;
}