margin: auto;

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

قرار دادن width برای یک عنصر سطح بلاک، از کشیده شدن بی‌نهایت آن به کناره‌ها جلوگیری می‌کند. آنگاه، شما می‌توانید با قرار دادن margin‌های چپ و راست به auto باعث شوید تا آن عنصر از نظر افقی در وسط قرار گیرد. آن عنصر، آن اندازه که شما برای آن پهنا در نظر گرفته اید را می‌پذیرد، سپس باقی فضا را به طور مساوی به margin برای طرفین خودش اختصاص می‌دهد.

تنها مشکل زمانی رخ می‌دهد که پهنای مرورگر از آن اندازه ای که شما برای عنصر اختصاص داده اید کمتر باشد. مرورگر‌ها برای حل این مساله از یک scrollbar افقی استفاده می‌کنند که زیاد جالب به نظر نمی‌رسد. بیایید این مشکل را به شکل بهتری حل کنیم...

</div>
  • Creative Commons License