HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали. Способ 3. Современный, математический.

html, css

Работает в новых браузерах. IE - от 10.
---

HTML

<div class="wrap">
	<div class="content"> </div>
</div>				

<div class="wrap">
	<img src="http://lorempixel.com/200/200/sports/" width="200" height="200">
</div>

CSS

.wrap {
	width: 400px;
	height: 400px;
	position: relative;
}

.content {
	width: 200px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.wrap img {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: block; 
	/* Для изображений в целях профилактики ставится "display: block", поскольку браузер по умолчанию добавляет к ним небольшую границу, которую лучше удалить */
}