أداة توسيط العناصر

توسيط عنصر في منتصف الصفحة كان لسنوات من أكثر ما يحيّر المبتدئين في CSS. اليوم صار الأمر بسيطًا بفضل Flexbox وGrid، لكن تعدّد الطرق قد يربك. هذه الأداة تجمع لك أسهل الحلول العملية في مكان واحد لتجرّبها مباشرة.

اختر طريقة التوسيط وشاهد العنصر يستقرّ في مكانه فورًا، مع كود CSS جاهز للنسخ.

جرّب بنفسك

الإعدادات

display: flex justify-content: center align-items: center

CSS الناتج

display: flex;

المعاينة

BOX

عطّل خيارين التوسيط وشوف كيف يروح العنصر لزاوية الصندوق

متى تستخدم هذه الخاصية؟

ستحتاج التوسيط في كل مشروع تقريبًا، وتحديدًا عندما تريد:

توسيط شعار أو رسالة في منتصف الشاشة
توسيط محتوى داخل بطاقة أو صندوق
توسيط أيقونة ونصّ بجانبها بدقّة

الطريقتان الأكثر استخدامًا تعتمدان على Flexbox وGrid.

أمثلة عملية

مثال: توسيط عنصر أفقيًا ورأسيًا بـ Flexbox.

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

جرّب طريقة Grid البديلة في الأداة بالأعلى وقارن أيّهما أبسط لحالتك.