مرکز‌سازی عناصر در CSS می‌تواند کاری پیچیده به نظر برسد، بخصوص وقتی که بخواهید یک عنصر خاص را درون یک کانتینر خاص دقیقاً در مرکز قرار دهید. خوشبختانه، Flexbox یکی از بهترین و ساده‌ترین راه‌حل‌ها برای این نوع نیازهاست. Flexbox به شما اجازه می‌دهد تا با استفاده از خاصیت‌های CSS ساده، عناصر را به سادگی مرکز‌سازی کنید. در اینجا روشی وجود دارد که به شما نشان می‌دهد چطور می‌توانید یک عنصر با کلاس cycle درون یک کانتینر با کلاس game-area را مرکز کنید.
ابتدا، مهم است که کانتینر (در اینجا .game-area) را به یک کانتینر Flex تبدلی کنید. این کار را با استفاده از خاصیت display: flex انجام می‌دهید. با این کار، تمام عناصر فرزند داخل این کانتینر به عناصر Flex تبدیل می‌شوند و می‌توانند به سادگی با استفاده از قواعد Flexbox مرتب شوند.
برای مرکز‌سازی عنصر .cycle، باید از دو خاصیت مهم استفاده کنید: justify-content و align-items. خاصیت justify-content برای مرکز‌سازی در راستای محور اصلی (معمولاً افقی) و align-items برای مرکز‌سازی در راستای محور متقابل (معمولاً عمودی) استفاده می‌شود.
برای این که عنصر .cycle هم از نظر افقی و هم عمودی مرکز شود، می‌توانید هر دو خاصیت را روی مقدار center تنظیم کنید. این روش نه تنها ساده است، بلکه خوانایی و نگهداری کد را نیز افزایش می‌دهد. بیایید کد نمونه را بررسی کنیم.
کد توضیحی برای مرکز‌سازی عنصر
.game-area {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* یا هر مقداری که شما نیاز دارید */
}
.cycle {
width: 100px;
height: 100px;
background-color: lightblue;
}
توضیح خط به خط کد
.game-area {
ایجاد یک کانتینر برای Flexbox تا بتوانیم عناصر داخل آن را کنترل کنیم.
display: flex;
این خاصیت، کانتینر .game-area را به یک کانتینر Flexbox تبدیل می‌کند.
justify-content: center;
این خاصیت، عناصر فرزند را در راستای محور اصلی فضای بین آن‌ها مرکز می‌کند.
align-items: center;
این خاصیت، عناصر فرزند را در راستای محور متقابل مرکز می‌کند.
height: 100vh;
تنظیم ارتفاع کانتینر برای اشغال کل ارتفاع صفحه یا مقدار دیگری که شما نیاز دارید.
}
.cycle {
تعریف استایل برای عنصر cycle تا به آن اندازه و رنگ دهیم.
width: 100px;
تنظیم عرض عنصر cycle تا به اندازه مشخصی درآید.
height: 100px;
تنظیم ارتفاع عنصر cycle برای تطابق با عرض تنظیم شده.
background-color: lightblue;
تعیین رنگ پس زمینه برای عنصر cycle.
}