Верт. позиционирование без Flexbox (вариант 1)

by Ksenia Polyakova

HTML

<div class="parent">
	<div class="child">
		<h1>Some header</h1>
		<h3>Some subheader</h3>
</div>

CSS

/* не подойдет, если в дочернем элементе многострочный текст,
основной недостаток - необходимость явно указывать высоту
элементов, рано или поздно такая верстка сломается */

* {
	margin:0;
	padding:0;
}

.parent {
	width:90%;
	height: 200px;
	line-height:200px;
	text-align:center;
	background-color: silver;
	border: 1px solid Fuchsia;
}

.child {
	width:50%;
	height:100px;
	line-height: initial;
	display: inline-block;
	vertical-align: middle;
	background-color: MistyRose;
	border: 1px solid Purple;
}