Centering in the unknown

dabblet.css

/**
 * Centering in the unknown
 */
/* Functionality */
.block {
	text-align: center;
	}
.block::before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	}
.centered {
	display: inline-block;
	vertical-align: middle;
	}
/* Visualization */
.block {
	background: #c0c0c0;
	border: #a0a0a0 solid 1px;
	margin: 20px;
	}
.block::before {
	/* For visualization *
	background: #808080;
	width: 5px;
	margin-right: -0.25em;
	*/
	}
.centered {
	width: 300px;
	padding: 10px 15px;
	border: #a0a0a0 solid 1px;
	background: #f5f5f5;
	text-align: left;
	}

dabblet.html

<div class="block" style="height: 300px;">
    
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
    
</div>

<div class="block" style="height: 200px;">
    
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
    
</div>

<div class="block" style="height: 600px;">
    
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
    
</div>

settings.json

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