Come posso centrare in verticale un'intestazione all'interno di un blocco con i CSS?

Come posso centrare in verticale un'intestazione all'interno di un blocco con i CSS?

La soluzione per centrare in verticale un'intestazione con i CSS all'interno di un contenitore è molto semplice.

Partendo dalla seguente marcatura:


<div class="wrapper">
	<h2>Test</h2>
</div>

La soluzione è la seguente:


.wrapper {
	height: 400px;
	position: relative;
}

.wrapper h2 {
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -0.5em; /* Metà del valore font-size */
}

Torna su