كيفية توسيط أي عنصر في CSS باستخدام Flexbox وGrid

مقدمة: أفضل طرق توسيط العناصر في CSS

يُعد توسيط العناصر من أكثر المهام شيوعًا في تصميم الواجهات، سواء كنت تريد محاذاة عنصر أفقيًا، أو رأسيًا، أو في منتصف الصفحة تمامًا. في هذا الدليل العملي، ستتعرف على أشهر الطرق الحديثة لتوسيط العناصر باستخدام Flexbox وGrid، بالإضافة إلى أساليب أخرى مثل position مع transform، واستخدام خاصية margin.

الهدف هنا ليس فقط عرض الأكواد، بل شرح متى تستخدم كل طريقة، وما الفرق بينها، وكيف تختار الحل الأنسب بحسب بنية التصميم.

فهم المحاور في CSS قبل البدء

قبل تطبيق أي طريقة توسيط، من المهم فهم المحورين الأساسيين اللذين تعتمد عليهما خصائص المحاذاة:

المحور الرئيسي

المحور الرئيسي هو الخط الأفقي من اليسار إلى اليمين، ويُعرف أيضًا باسم Main Axis أو X-Axis. غالبًا ما تستخدمه عند ضبط المحاذاة الأفقية داخل الحاويات المرنة.

المحور المتقاطع

المحور المتقاطع هو الخط العمودي من الأعلى إلى الأسفل، ويُعرف باسم Cross Axis أو Y-Axis. ويُستخدم عادةً عند تنفيذ المحاذاة الرأسية.

إعداد المشروع للتجربة

لتجربة جميع الطرق الواردة في هذا الشرح، ابدأ ببنية بسيطة تتكون من حاوية وعنصر داخلي.

كود HTML

<div class="container">
  <div class="box-1"></div>
</div>

تهيئة أنماط المتصفح الافتراضية

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

إعداد الحاوية والعنصر

.container {
  height: 100vh;
}

.box-1 {
  width: 120px;
  height: 120px;
  background-color: skyblue;
  border: 2px solid black;
}

استخدام القيمة 100vh في الحاوية ضروري إذا كنت تريد ملاحظة التوسيط الرأسي بوضوح داخل نافذة المتصفح.

كيفية توسيط العناصر باستخدام Flexbox

تُعد Flexbox من أسهل وأشهر الطرق لتوسيط العناصر، خاصة عندما يكون لديك عنصر واحد أو مجموعة عناصر تريد محاذاتها داخل حاوية.

تفعيل وضع Flexbox

.container {
  display: flex;
  height: 100vh;
}

بعد تفعيل display: flex، ستعتمد المحاذاة أساسًا على الخاصيتين justify-content وalign-items.

توسيط العنصر أفقيًا باستخدام justify-content

إذا أردت نقل العنصر إلى منتصف الحاوية على المحور الأفقي، فاستخدم الخاصية justify-content بالقيمة center.

.container {
  display: flex;
  height: 100vh;
  justify-content: center;
}

توسيط العنصر رأسيًا باستخدام align-items

لتوسيط العنصر على المحور العمودي، استخدم الخاصية align-items.

.container {
  display: flex;
  height: 100vh;
  align-items: center;
}

توسيط العنصر أفقيًا ورأسيًا باستخدام Flexbox

هذه هي الطريقة الأكثر شيوعًا وبساطة عندما تريد وضع العنصر في منتصف الحاوية تمامًا.

.container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

كيفية توسيط العناصر باستخدام CSS Grid

إذا كنت تعمل على تخطيط أكثر تعقيدًا، فإن Grid يمنحك مرونة عالية، كما يوفر طرقًا مباشرة لتوسيط العناصر بسهولة.

تفعيل Grid

.container {
  display: grid;
  height: 100vh;
}

أشهر الخصائص المستخدمة هنا هي justify-content وalign-content، كما يمكن استخدام justify-items وalign-items في بعض الحالات.

توسيط العنصر أفقيًا باستخدام Grid

.container {
  display: grid;
  height: 100vh;
  justify-content: center;
}

توسيط العنصر رأسيًا باستخدام align-content

.container {
  display: grid;
  height: 100vh;
  align-content: center;
}

توسيط العنصر أفقيًا ورأسيًا باستخدام Grid

.container {
  display: grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
}

طريقة بديلة باستخدام justify-items وalign-items

.container {
  display: grid;
  height: 100vh;
  justify-items: center;
  align-items: center;
}

استخدام الخاصية المختصرة place-content

إذا كنت تريد كودًا مختصرًا وأنيقًا، فيمكنك استخدام place-content، وهي اختصار للخاصيتين justify-content وalign-content.

.container {
  display: grid;
  height: 100vh;
  place-content: center;
}

استخدام position وtransform لتوسيط العناصر

هذه الطريقة مناسبة في بعض الحالات الخاصة، خاصةً عندما يكون العنصر موضوعًا بشكل مطلق داخل حاوية محددة.

إعداد الحاوية والعنصر

.container {
  height: 100vh;
  position: relative;
}

.box-1 {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: skyblue;
  border: 2px solid black;
}

لماذا نحتاج إلى transform: translate(-50%, -50%)؟

عند استخدام top: 50% وleft: 50%، يتم نقل الزاوية العلوية اليسرى للعنصر إلى منتصف الحاوية، وليس مركز العنصر نفسه. لذلك نستخدم transform لإرجاع العنصر بمقدار نصف عرضه وارتفاعه حتى يصبح في المنتصف الحقيقي.

transform: translate(-50%, -50%);

توسيط العنصر أفقيًا باستخدام left

.box-1 {
  left: 50%;
  transform: translate(-50%);
}

توسيط العنصر رأسيًا باستخدام top

.box-1 {
  top: 50%;
  transform: translate(0, -50%);
}

توسيط العنصر أفقيًا ورأسيًا معًا

.box-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

استخدام خاصية margin لتوسيط العناصر

يمكن الاعتماد على margin في حالات معينة، خصوصًا عندما تكون أبعاد العنصر معروفة وتريد الاستفادة من السلوك التلقائي للهوامش.

إعداد البداية

.container {
  height: 100vh;
  display: flex;
}

.box-1 {
  width: 120px;
  height: 120px;
  background-color: skyblue;
  border: 2px solid black;
}

توسيط العنصر أفقيًا باستخدام margin

.box-1 {
  margin: 0 auto;
}

توسيط العنصر رأسيًا باستخدام margin

.box-1 {
  margin: auto 0;
}

توسيط العنصر أفقيًا ورأسيًا باستخدام margin

.box-1 {
  margin: auto;
}

مقارنة سريعة بين أشهر طرق التوسيط في CSS

متى تستخدم كل طريقة؟

• استخدم Flexbox عندما يكون هدفك محاذاة عنصر واحد أو مجموعة عناصر بسرعة ووضوح.
• استخدم Grid إذا كان التخطيط يعتمد على صفوف وأعمدة وتحتاج إلى مرونة أكبر.
• استخدم position مع transform عندما يكون العنصر خارج التدفق الطبيعي للصفحة.
• استخدم margin عندما تكون بنية التخطيط بسيطة وتريد حلًا مختصرًا.

نصائح عملية لتجنب أخطاء التوسيط

1. تأكد من أن الحاوية تملك ارتفاعًا واضحًا مثل 100vh إذا كنت تختبر التوسيط الرأسي.
2. لا تخلط بين justify-content وalign-items دون فهم المحور الذي تعمل عليه كل خاصية.
3. في Grid، انتبه إلى الفرق بين justify-content وjustify-items.
4. عند استخدام position: absolute، لا تنسَ تعيين position: relative للحاوية الأب.
5. اختر الطريقة الأبسط ما دامت تحقق النتيجة المطلوبة، فالبساطة تسهّل الصيانة مستقبلًا.

الخلاصة التقنية

إذا كنت تبحث عن أفضل طريقة عملية لتوسيط العناصر في أغلب المشاريع الحديثة، فإن Flexbox هو الخيار الأول غالبًا بسبب بساطته ووضوحه. أما إذا كان التصميم يعتمد على شبكة معقدة، فإن Grid يمنحك تحكمًا أوسع. وفي السيناريوهات الخاصة، تظل طريقتا position مع transform وmargin مفيدتين جدًا. القاعدة الأهم هي فهم سلوك كل خاصية بدل حفظ الأكواد فقط، لأن هذا ما يجعلك تختار الحل الصحيح بسرعة وكفاءة.