الخطوات

1
التوسيط باستخدام Flexbox

الثلاثة أسطر الكلاسيكية. طبّق هذه الخصائص الثلاث على عنصر الأب، وسيتمركز أي عنصر فرعي — بغض النظر عن حجمه — أفقياً وعمودياً في آنٍ واحد.
css
```
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
```
2
استخدام place-items في Grid لكود أقل

place-items هو اختصار للخصائص align-items وjustify-items معاً على حاوية Grid. سطر واحد يؤدي ما تؤديه ثلاثة أسطر في Flexbox.
css
```
.parent {
  display: grid;
  place-items: center;
}
```
3
التوسيط الأفقي فقط بـ margin-inline

حين تحتاج التوسيط الأفقي فقط وللعنصر عرض محدد، فإن margin-inline: auto هو الحل الأنظف. يضبط الهوامش اليسرى واليمنى على auto باستخدام الخصائص المنطقية، فيعمل بشكل صحيح في تخطيطات LTR وRTL على حدٍّ سواء.
css
```
.card {
  width: 640px;
  max-width: 100%;
  margin-inline: auto;
}
```
4
توسيط النص داخل عنصر

لتوسيط المحتوى المضمّن (النصوص، والصور المضمّنة، والأزرار)، لا تزال text-align: center الأداة الصحيحة. لا تُوسّط العنصر نفسه — بل المحتوى بداخله فقط.
css
```
.hero-text {
  text-align: center;
}
```
5
استخدام place-content كاختصار في Grid

place-content اختصار لـ align-content وjustify-content معاً على حاوية Grid. على عكس place-items، يؤثر على كيفية توزيع مسارات الشبكة كلها — مفيد حين تملك صفوفاً أو أعمدة متعددة وتريد توسيط المجموعة كاملة.
css
```
.parent {
  display: grid;
  place-content: center;
  gap: 1rem;
}
```
6
اعرف أي أسلوب تستخدم ومتى
لكل أسلوب حالة استخدام واضحة:
- ثلاثة أسطر Flex — للأغراض العامة؛ يعمل على أي أب لديه عناصر فرعية متعددة.
- Grid مع place-items: center — لعنصر فرعي واحد أو عند وجود تخطيط Grid مسبق.
- margin-inline: auto — للتوسيط الأفقي حين يملك العنصر عرضاً صريحاً.
- text-align: center — لتوسيط المحتوى المضمّن فقط.
تجنّب استخدام التموضع المطلق مع الهوامش السالبة أو حيلة translate(-50%, -50%) في الكود الجديد — فهي تنكسر مع الأحجام الديناميكية.
7
بناء بطاقة مُوسَّطة على شاشة كاملة

أكثر حالات الاستخدام الواقعية شيوعاً: بطاقة مُوسَّطة على صفحة hero كاملة أو صفحة تسجيل دخول. استخدم 100dvh بدلاً من 100vh لكي يأخذ التخطيط واجهة المتصفح في الحسبان (شريط العنوان وشريط التنقل) على الأجهزة المحمولة.
css
```
.screen {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1rem; /* prevents edge-bleed on small screens */
}

.card {
  width: 400px;
  max-width: 100%;
  padding: 2rem;
  border-radius: 0.75rem;
  background: white;
  box-shadow: 0 4px 24px rgb(0 0 0 / .08);
}
```

نصائح ومحاذير

استخدم <code>min-height</code> بدلاً من <code>height</code> على العنصر الأب حتى تتمكن الحاوية من التمدد إذا كان المحتوى أطول من نافذة العرض.
<code>100dvh</code> (ارتفاع نافذة العرض الديناميكي) أكثر أماناً من <code>100vh</code> على الأجهزة المحمولة — إذ يأخذ واجهة المتصفح بعين الاعتبار.
في تخطيطات RTL، افضّل دائماً الخصائص المنطقية (<code>margin-inline</code>، <code>padding-block</code>) على الخصائص الفيزيائية (<code>margin-left</code>، <code>padding-top</code>).
<code>place-items: center</code> في Grid يُوسّط العناصر على مستوى الخلية. في حال وجود شبكة متعددة الصفوف، ادمجه مع <code>place-content: center</code> لتوسيط مسارات الشبكة أيضاً.

خاتمة

أصبح لديك الآن مجموعة أدوات كاملة للتوسيط في CSS. القاعدة العملية: ابدأ بـ place-items: center على Grid — فهي الأكثر إيجازاً. انتقل إلى ثلاثة أسطر Flexbox حين تحتاج تحكماً محورياً مخصصاً، واستخدم margin-inline: auto للعناصر block ذات العرض الثابت. لقد ولّت أيام position: absolute; top: 50%.

#CSS #Layout

العودة إلى جميع الأدلة

كيفية توسيط عنصر في CSS (الطريقة الحديثة)

الخطوات

التوسيط باستخدام Flexbox

استخدام place-items في Grid لكود أقل

التوسيط الأفقي فقط بـ margin-inline

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

استخدام place-content كاختصار في Grid

اعرف أي أسلوب تستخدم ومتى

بناء بطاقة مُوسَّطة على شاشة كاملة

نصائح ومحاذير

خاتمة

أدلة ذات صلة

كيفية نشر تطبيق Laravel على خادم VPS (Apache و MySQL)

كيفية إضافة دعم متعدد اللغات لتطبيق Laravel

كيفية إرسال رسائل بريد إلكتروني عبر Laravel

هل تحتاج مساعدة في مشروعك؟