Vertically centered text with SVG

dabblet.css

/* Vertically centered text with SVG */

div {
	width: 300px;
	height: 150px;
	background: #f06;
	font: bold 150% sans-serif;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	overflow: hidden; resize: both; /* just for this demo */

}

svg {
	width: 100%; height: 100%;
	pointer-events: none; /* so that you can resize the element */
}

text {
	fill: white;
	text-anchor: middle;
	pointer-events: auto; /* Cancel the svg’s pointer-events */
}

p {
	font: italic 100% Georgia, serif;
}

dabblet.html

<p>
	Resize the div below from the handle at the bottom right corner (if your browser supports the <code>resize</code> CSS property)
	or change the CSS code to observe what happens at different dimensions.
</p>
<div>
	<svg><text x="50%" y="50%" dy=".3em">
		Look, I’m centered!
	</text></svg>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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