چطور در HTML و CSS یک المان رو وسط در وسط قرار دهم؟ (4 روش وسط چین کردن المان در CSS)

برای وسط چین کردن المان ها می تونید از روش های مختلفی استفاده کنید.

روش اول: استفاده از FlexBox (روش پیشنهادی)

با flexbox بسیار آسان است که یک تگ یا المان HTML را به صورت افقی و عمودی در مرکز قرار دهید.

کد HTML:

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

کد CSS:

#inner {  
  border: 0.05em solid black;
}

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

}

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

روش دوم: استفاده از display:grid

برای وسط چین کردن می توانید از ماژول Grid استفاده کنید. گرچه تفاوت چندانی با روش بالا ندارد و همان روش بالا توصیه می شود.

#outer {
  display: grid;
  justify-content: center;
  align-items: center;
}

روش سوم: وسط چین کردن المان ها با margin

برای وسط چین کردن یک المان به این روش، کافیست ابتدا مطمئن شوید المان شما بلوکی (Block) است. اگر المان شما بلوکی نبود، با دستور Display:block; آن را به یک المان بلوکی تبدیل کنید.

سپس مطمئن شوید المان شما تمام عرض نباشد. یعنی عرض آن هر مقداری غیر 100 درصد باشد.

سپس با تنظیم ویژگی margin:auto می توانید المان را به صورت افقی وسط چین کنید.

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

برای مرورگرهای اینترنت اکسپلورر 8 به بالا بهتر است تا display:table را استفاده کنید. با این کار نیازی به تعیین عرض برای المان هم نخواهید داشت.

#inner {
  display: table;
  margin: 0 auto;
}

روش چهارم: وسط چین کردن متن

اگر المان شما بلوکی است می توانید از ویژگی text-align:center برای وسط چین کردن متن یا سایر المان های درون خطی (inline) که فرزند این تگ هستند استفاده کنید.