أداة توسيط العناصر
جرّب بنفسك
الإعدادات
CSS الناتج
display: flex;✅ تم النسخ
المعاينة
عطّل خيارين التوسيط وشوف كيف يروح العنصر لزاوية الصندوق
توسيط العناصر في CSS
توسيط عنصر يبدو أبسط مسألة في CSS، لكنه أشهر ما يُحيّر المبتدئ — لأن الطريقة تختلف باختلاف ما تريد توسيطه: نصًّا أم صندوقًا، أفقيًا أم رأسيًا أم كليهما. هذه الصفحة تجمع الطرق كلها في مكان واحد.
القاعدة المريحة اليوم: Flexbox يحلّ 90% من حالات التوسيط بثلاثة أسطر. أمّا الطرق القديمة (الهوامش التلقائية، الإزاحة بـ transform) فما زالت مفيدة في حالات بعينها.
🔑 اربطها بشيء تعرفه
تخيّل أنك تعلّق لوحة على جدار: التوسيط الأفقي أن تكون المسافة يمينًا تساوي المسافة يسارًا، والرأسي أن تكون المسافة فوقها تساوي التي تحتها. أدوات CSS تحسب لك هذه المسافات تلقائيًا.
متى تستخدمها؟
توسيط نص
أبسط حالة: text-align: center للنصّ داخل عنصره.
توسيط صندوق أفقيًا
margin: 0 auto لعنصر له عرض محدّد.
توسيط تام (أفقي ورأسي)
Flexbox بثلاثة أسطر — الحل الأنظف اليوم.
توسيط نافذة منبثقة
وسط الشاشة تمامًا مهما كان حجمها.
طرق التوسيط
| الخاصية | ماذا تفعل؟ | قيم شائعة |
|---|---|---|
| text-align: center | يوسّط النص والعناصر السطرية أفقيًا. | center |
| margin: 0 auto | يوسّط صندوقًا له عرض محدّد أفقيًا. | 0 auto |
| justify-content | توسيط أفقي عبر Flexbox. | center |
| align-items | توسيط رأسي عبر Flexbox. | center |
| place-items | توسيط تام عبر Grid بسطر واحد. | center |
مثال عملي
التوسيط التام — الحل الذهبي بـ Flexbox:
.container {
display: flex;
justify-content: center; /* أفقي */
align-items: center; /* رأسي */
min-height: 300px;
}بديل أقصر بـ Grid: display:grid; place-items:center; — سطر واحد يوسّط تمامًا. جرّب كليهما في الأداة أعلاه.
أخطاء شائعة
- 1. استعمال
margin:autoلتوسيط رأسي في تخطيط عادي: لا يعمل رأسيًا إلا داخل Flexbox أو Grid. - 2. نسيان ارتفاع للحاوية عند التوسيط الرأسي: بلا ارتفاع، لا مساحة للتوسيط داخلها. أضِف
min-height. - 3. محاولة توسيط عنصر بـ
text-align:centerوهو ليس سطريًا: تعمل للنصّ لا للصناديق ذات العرض.
كيف تستفيد من الأداة أعلاه؟
بدّل بين طرق التوسيط في الأداة أعلاه، وشاهد أثر كل طريقة على العنصر. لاحظ متى يعمل التوسيط الرأسي ومتى يحتاج ارتفاعًا للحاوية.
أسئلة شائعة
display:flex; justify-content:center; align-items:center; مع ارتفاع محدّد. أو الأقصر: display:grid; place-items:center;. position:fixed; inset:0; display:flex; justify-content:center; align-items:center; تضع محتواها في وسط الشاشة تمامًا.