Align vertically absolutely positioned element without known height

dabblet.css

/**
 * Align vertically absolutely positioned element without known height
 */
#has-known-height {
	position: relative;
	background: lightgray;
	height: 300px;
}
#absolutely-positioned {
	position: absolute; /* don't touch this property */
	background: blue;
	color: white;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}

dabblet.html

<div id="has-known-height">
	<div id="absolutely-positioned">
		Align me vertically, please.<br>
		You can add as many elements and styles as you need,<br>
		but <strong>#absolutely-positioned</strong> should have
		<code>position: absolute;</code>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}