Центрирование блока по вертикали и горизонтали

Кодинг /

CSS

30.06.2014

job

4543

Часто стал встречаться с задачей центрирования изображения внутри блока, при проектировании интернет-магазинов. Актуальней всего если шаблон плавающий\адаптивный.

В большинстве случаев делают смещение top и left 50% и отрицательный отступ, но есть более красивый способ:

HTML:

<div class="container">
	<img src="/img.png" alt="" />
</div>

CSS:

.container {
	position: relative;
}
	
.container img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

Помоему такой подход выглядит аккуратней нежели отрицательные значения.

Ну если совсем уж подойти к плавающим стандартам можно заставить и изображение изменять свои размеры

.container {
	position: relative;
}
	
.container img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

В случае центрирования блочного элеента, необходимо указать его размеры.

Посмотреть в действии: demo - изменяем размеры окна и наслаждаемся!