margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}
<div id="main">

Установка width для блочного элемента пресечет его бесконечное растягивание к левому и правому краям. Вы можете установить левый и правый отступы, задав значение auto, которое приведет к центрированию элемента по горизонтали. Элемент будет занимать ширину, которую вы укажете, а оставшееся незаполненное пространство будет разделено поровну между двумя отступами.

Единственная проблема возникает, когда окно браузера уже, чем ширина вашего элемента. Браузер решает эту проблему, создав горизонтальную полосу прокрутики на странице. Давайте улучшим ситуацию...

</div>
  • Creative Commons License