htmler_cetreme.pngСегодня раскажу вам о простом способе отцентровать любой блок средставим CSS.

Под блоком я понимаю блочный элемент, такие как <div>,<p> или любой другой, для которого в стиле прописано display:block;
Под простым я понимаю такой способ, который можно применить минимальным количество строк, до 5-ти.

Итак, всё очень просто. Нам понадобиться блочный элемент, для примера возьмем блок <div class=’centre_me’>, вот такой:

Текст, который находится в центре.

А теперь опишем для него простой стиль.

div.centre_me{
	margin-left: auto;
	margin-right: auto;
	width: 400px;
/*И для красоты*/
	backround: #ccc;
	border: 1px dotted #777;
	padding: 5px;
}

Вот тут смотри, что получилось. Блок отцентровывается относительно размеров родительского блока (в данном случае document.body) для любой ширины экрана.Этот подход не новый, он появился вместе с CSS2, но «туго» поддерживается Internet Explorer версий ниже 6, но теперь, когда даже сам Microsoft хочет, чтобы IE6 быстрее вымер, это уже не проблема.
Таким способом можно отцентровать абсолютно любой блок, относительно его родителя, естественно это не будет работать, если у центруемого блока установить стиль

position:absolute;

и будет работать по-умолчанию или если у него будет стиль:

position:relative;