مرکزگرایی (Centering) و تراز کردن (Aligning) عناصر یکی از رایج‌ترین و گاهی چالش‌برانگیزترین وظایف در طراحی وب با CSS است. این کار بسته به اینکه عنصر مورد نظر درون‌خطی، بلوکی، یا بخشی از یک چیدمان پیچیده‌تر (مانند Flexbox یا Grid) باشد، روش‌های متفاوتی دارد.

۱. مرکزگرایی افقی (Horizontal Centering):

  • برای متن و عناصر درون‌خطی (Inline/Inline-block):

  • روش: اعمال text-align: center; بر روی عنصر والد (Parent Element).

  • توضیح: این خصوصیت، محتوای درون‌خطی (متن، <span>, <a>, <img>, inline-block ها) را در مرکز افقی جعبه والد خود تراز می‌کند.

  • برای عناصر بلوکی (Block-level Elements) با عرض مشخص:

  • روش: اعمال margin-left: auto; و margin-right: auto; (یا به صورت خلاصه margin: 0 auto; اگر ارتفاع مهم نباشد).

  • توضیح: این تکنیک زمانی کار می‌کند که عنصر بلوکی دارای width مشخصی باشد. با تنظیم حاشیه‌های چپ و راست به صورت خودکار، مرورگر فضای باقی‌مانده را به طور مساوی در دو طرف تقسیم کرده و عنصر را در مرکز افقی قرار می‌دهد.

  • با استفاده از Flexbox:

  • روش: بر روی والد (Parent Element)، خصوصیات display: flex; و justify-content: center; را اعمال کنید.

  • توضیح: justify-content: center; عناصر درون کانتینر فلکس را در محور اصلی (که به طور پیش‌فرض افقی است) در مرکز قرار می‌دهد.

  • با استفاده از CSS Grid:

  • روش: بر روی والد (Parent Element)، خصوصیات display: grid; و justify-items: center; (برای تراز کردن آیتم‌ها در سطرها) یا place-items: center; (برای مرکزگرایی هم افقی و هم عمودی) را اعمال کنید.

  • توضیح: justify-items: center; آیتم‌ها را در سلول‌های گرید خود به صورت افقی در مرکز قرار می‌دهد.

۲. مرکزگرایی عمودی (Vertical Centering):

مرکزگرایی عمودی معمولاً کمی پیچیده‌تر از افقی است.

  • برای متن درون یک خط (Single Line of Text):

  • روش: تنظیم line-height عنصر والد برابر با height آن.

  • توضیح: این ترفند باعث می‌شود که خط متن در مرکز عمودی جعبه والد قرار گیرد. البته این روش فقط برای یک خط متن کار می‌کند.

  • با استفاده از Flexbox:

  • روش: بر روی والد (Parent Element)، خصوصیات display: flex; و align-items: center; را اعمال کنید.

  • توضیح: align-items: center; عناصر درون کانتینر فلکس را در محور متقاطع (که به طور پیش‌فرض عمودی است) در مرکز قرار می‌دهد.

  • با استفاده از CSS Grid:

  • روش: بر روی والد (Parent Element)، خصوصیات display: grid; و align-items: center; (برای تراز کردن آیتم‌ها در ستون‌ها) یا place-items: center; (برای مرکزگرایی هم افقی و هم عمودی) را اعمال کنید.

  • توضیح: align-items: center; آیتم‌ها را در سلول‌های گرید خود به صورت عمودی در مرکز قرار می‌دهد.

  • با استفاده از position: absolute و transform:

  • روش:

  1. والد را position: relative; کنید.
  2. عنصر مورد نظر را position: absolute; و top: 50%; قرار دهید.
  3. از transform: translateY(-50%); برای جابجایی عنصر به اندازه نیمی از ارتفاع خودش به سمت بالا استفاده کنید.
  • توضیح: این روش به والد و عنصر اجازه می‌دهد تا بدون نیاز به دانستن ابعاد دقیقشان، به صورت عمودی در مرکز قرار گیرند.

۳. مرکزگرایی هم افقی و هم عمودی (Absolute Centering):

برای مرکز کردن یک عنصر هم در محور افقی و هم عمودی، اغلب از ترکیب روش‌های فوق استفاده می‌شود:

  • با Flexbox: display: flex; justify-content: center; align-items: center; بر روی والد.
  • با Grid: display: grid; place-items: center; بر روی والد.
  • با position: absolute:
  1. والد: position: relative;
  2. فرزند: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  • توضیح: top: 50%; left: 50%; عنصر را به مرکز جعبه والد می‌برد، و transform: translate(-50%, -50%); آن را به اندازه نیمی از عرض و ارتفاع خودش به عقب جابجا می‌کند تا دقیقاً در مرکز قرار گیرد.

۴. تراز کردن متن (Text Alignment):

  • text-align: left; (پیش‌فرض)
  • text-align: right;
  • text-align: center;
  • text-align: justify;: متن را طوری تنظیم می‌کند که هم لبه چپ و هم راست آن تراز باشد (با افزایش یا کاهش فواصل بین کلمات).

انتخاب استراتژی مناسب برای مرکزگرایی و تراز کردن به نوع عنصر (بلوکی، درون‌خطی)، محتوای والد، و ابزارهای چیدمانی که استفاده می‌کنید (مانند Flexbox یا Grid) بستگی دارد.

کلیدواژه ها : Centering CSS-تراز کردن CSS-مرکزگرایی افقی-مرکزگرایی عمودی-text-align-margin auto-flexbox-grid-position absolute-transform-