Text centered over the image

dabblet.css

/**
 * Text centered over the image
 */

figure {
	border: 1px solid red;
	float: left;
	position: relative;
}

img {
	display: block;
}

figcaption {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
}

figcaption div {
	border: 1px solid green;
	display: table;
	height: 100%
}

figcaption h1 {
	display: table-cell;
	vertical-align: middle;	
}

dabblet.html

<figure>
	<img src="http://placekitten.com/320/320" />
	<figcaption>
		<div>
			<h1>Lorem ipsum dolor sit amet</h1>
		</div>
	</figcaption>
</figure>

dabblet.js

// alert('Hello world!');

settings.json

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