Wyśrodkowanie h2 w pionie

Question

Witam, chciałbym zrobić to co w temacie.
Próbowałem już:

.h2{
    display: flex;
    justify-content: center;
    align-items: center;
}

lub:

.h2{
    display: table
}

span
{
    display: table-cell;
    vertical-align: middle;

}

jak i z jq się bawiłem. Jq działa ale po otworzeniu lub odświeżeniu strony trzeba choć Tab nacisnąć żeby zaczęło działać.

Nie mam już pomysłów.

	<div class="container">
		<div class="block">
			<h2 class="h2">
				<span>
					Znajdziesz tutaj kilka pomocnych wzorów matematycznych, które ułatwią Ci prace
				</span>
			</h2>
			<img class="img" src="obrazy/matma.jpg"/>
		</div>
		<div class="block">
			<h2 class="h2" id="prawa">
				<span>
					Dobra zabawa przy eksperymentowaniu z dowolnymi wartościami
				</span>
			</h2>
			<img class="img" id="lewa" src="obrazy/fizyka.jpg"/>
		</div>
		<div class="block">
			<h2 class="h2">
				<span>
					Zobacz jak informatyka jest potężną dziedziną nauki, naprawde
				</span>
			</h2>
			<img class="img" src="obrazy/infa.jpg"/>
		</div>
	<div>

/* sposob 1 */
h2{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 30px;
	display: flex;
	justify-content: center;
	align-items: center; 
}
/*

sposob 2
.h2{
    display: table
}

span
{
	display: table-cell;
	vertical-align: middle;

}
*/

http://screenshot.sh/oAzDLYQL3WwMs

Z góry dzięki.

PS. spany są dodane na potrzeby sposobu 2 wiec jakby co to mogę je usunąć

PS2. line-height też nie działa bo tu mam kilka linii

Answer 1

Spróbuj spaddingować je sobie. Skoro nic innego tam nie będzie to walnij height na 100% ale padding-top i padding-bottom ustaw po równo tak, żeby były na środku.

Answer 2

Wydaje mi się, że flex powinien być nadany dla .block i wtedy żadne float'y nie będą potrzebne a h2 będzie wyśrodkowane względem .block.

Answer 3

http://codepen.io/anon/pen/QKREqZ