Выравнивание блоков по центру в html

Сегодня я попробую немного рассказать о выравниванию блоков по центру страницы или другого блока. Статья будет состоять из двух частей:

  • Выравнивание обычного блока
  • Выравнивание блока из position: absolute;

выравнивание блока по центру position absolute

Выравнивание обычного блока

Это конечно же самое начало верстки и каждый верстальщик знает как это работает, но кто не знает, тот может прочитать.
И так, у нас есть блок с классом “positon”, например. Вот код для примера:


<!DOCTYPE html>
<html>
<head>
	<title>Position</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div class="positon"></div>
</body>
</html>

Давайте я его немного отформатирую для начала…


.positon {
	width: 300px;
	height: 300px;
	background: #e3e3e3;
}

Вот он:

блок с левой стороны

Теперь у него есть размер и цвет, но он в левом верхнем углу, а мы хотим выровнять его по центру браузера. Это конечно же очень просто, нам просто нужно всего лишь дописать одну строчку кода.


.positon {
/* Изменение внешнего вида */
	width: 300px;
	height: 300px;
	background: #e3e3e3;
/* Выравнивание по центру */
	margin: 0 auto;
}

И смотрим результат:

как выровнять блок по центру браузера

Вот так просто блок выравнивается по центру окна браузера.

Выравнивание блока из position: absolute;

Когда у блока есть позиционирование, а именно position: absolute, всё немного иначе… Выравнивание по центру с помощью “margin: 0 auto;” уже не прокатывает. Блок просто лезет в верхний левый угол браузера.
Для этого случая есть небольшой фикс:


.positon {
/* Изменение внешнего вида */
	width: 300px;
	height: 300px;
	background: #e3e3e3;
/* Выравнивание по центру */
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
}

Это наверное самый просто способ выравнивания абсолютного блока по центру. Кстати это кроссбраузерно, и работает не только для “главного” блока, но и для “внутренних” блоков.

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>