JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div>
	<svg><text x="50%" y="50%" dy=".3em">
		Look, I’m centered!
	</text></svg>
</div>

CSS

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 */
	color: white;
}

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

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