با استفاده از FlexBox خیلی راحت می‌تونید دیو رو به صورت افقی و عمودی مرکز کنید.

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

برای اینکه دیو رو به صورت عمودی مرکز کنید، از ویژگی align-items: center استفاده کن.

راه‌حل‌های دیگه:

می‌تونی این CSS رو به <div> داخلی اعمال کنی:

#inner {
  width: 50%;
  margin: 0 auto;
}

البته، نیازی نیست عرض رو ۵۰٪ تنظیم کنی. هر عرضی کمتر از دربرگیرنده <div> کار می‌کنه. margin: 0 auto کار مرکز کردن واقعی رو انجام می‌ده.