عناصر در جهت عمودی و افقی همزمان در CSS

تراز کردن عناصر در صفحه‌ی وب یکی از چالش‌های رایج در طراحی با CSS است. گاهی نیاز داریم یک عنصر را هم در جهت عمودی و هم در جهت افقی به صورت همزمان در وسط صفحه یا داخل یک container قرار دهیم. این کار برای ایجاد طرح‌های زیبا و حرفه‌ای ضروری است.

روش‌های مختلفی برای این کار وجود دارد که بسته به نیاز و ساختار پروژه می‌توان از آنها استفاده کرد. در ادامه به بررسی بهترین و پرکاربردترین روش‌ها می‌پردازیم.

تراز کردن عناصر در وسط صفحه یا یک container در موارد زیر کاربرد دارد:

• ایجاد صفحات ورود (login pages)
• طراحی کارت‌های محصول یا خدمات
• نمایش پیام‌های سیستم یا اعلان‌ها
• ایجاد مودال‌ها (modal windows)
• طراحی صفحات خطا یا صفحات خالی

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

مثال ۱: استفاده از Flexbox

Flexbox یکی از قدرتمندترین روش‌های چیدمان در CSS است که کنترل کاملی بر تراز عناصر می‌دهد.

.container {
  display: flex;
  justify-content: center; /* تراز افقی */
  align-items: center; /* تراز عمودی */
  height: 100vh; /* ارتفاع کامل صفحه */
}

در این روش، justify-content برای تراز افقی و align-items برای تراز عمودی استفاده می‌شود. این روش برای عناصر تک یا گروهی از عناصر کاربرد دارد.

مثال ۲: استفاده از Grid

CSS Grid نیز روش مدرن دیگری برای تراز کردن عناصر است که انعطاف‌پذیری بالایی دارد.

.container {
  display: grid;
  place-items: center; /* تراز همزمان عمودی و افقی */
  height: 100vh;
}

در این روش، خاصیت place-items به صورت خلاصه هر دو تراز عمودی و افقی را کنترل می‌کند. این روش برای طرح‌های پیچیده‌تر مناسب است.

مثال ۳: استفاده از Position و Transform

این روش قدیمی‌تر است اما هنوز در برخی موارد کاربرد دارد، مخصوصاً وقتی نیاز به پشتیبانی از مرورگرهای قدیمی داریم.

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

در این روش، ابتدا عنصر را با position به مرکز صفحه می‌بریم، سپس با transform آن را دقیقاً در وسط قرار می‌دهیم. این روش برای عناصر با ابعاد ثابت مناسب است.