تعرف على طرق توسيط العناصر داخل div
عند تصميم صفحات الويب، يواجه المطوّرون غالبًا مشكلة توسيط العناصر داخل الحاويات. سواء أردت وضع زر في منتصف الشاشة أو محاذاة بطاقة Card في واجهة مستخدم، فستجد أن هناك أكثر من طريقة لتحقيق ذلك باستخدام CSS.
في هذا المقال، سنتعرّف على أبرز الطرق الشائعة لتوسيط العناصر، مع شرح مزايا وقيود كل طريقة، مدعومة بأمثلة عملية.
الطريقة الأولى: margin: auto
الطريقة الأبسط لتوسيط العناصر أفقيًا.
.small {
width: 300px;
height: 300px;
margin: auto;
}
من مميزات هذه الطريقة:
- سهلة وسريعة.
- مناسبة عند وجود عنصر واحد فقط.
من عيوب هذه الطريقة:
- لا تعمل بشكل جيد مع عدة عناصر.
- لا تدعم التوسيط العمودي.
الطريقة الثانية: باستخدام Flexbox أو Grid
باستخدام display: flex أو display: grid، يمكنك محاذاة العناصر أفقيًا وعموديًا بسهولة.
.big {
width: 500px;
height: 500px;
display: flex;
justify-content: center; /* أفقياً */
align-items: center; /* عمودياً */
}
من مميزات هذه الطريقة:
- مرنة جدًا مع العناصر المتعددة.
- مناسبة للتخطيطات (Layouts) المعقدة.
من عيوب هذه الطريقة:
تحتوي على خصائص متعددة للمحاذاة، مما قد يربك المبتدئ.
الطريقة الثالثة: position + transform
طريقة دقيقة لتوسيط العناصر خاصة عندما يكون حجمها متغيّرًا
.big {
width: 500px;
height: 500px;
position: relative;
}
.small {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
من مميزات هذه الطريقة:
- تضمن بقاء العنصر في المنتصف مهما تغيّر حجمه.
- مفيدة للعناصر الديناميكية.
من عيوب هذه الطريقة:
تتطلب فهمًا جيدًا للتموضع والتحويل.
مقارنة بين الطرق الثلاثة لتوسيط العناصر
- margin: auto بسيطة وسريعة لكنها لا تعمل عموديًا، ومحدودة مع عناصر متعددة، أفضل استخدام لها عند وجود عنصر واحد أفقيًا
- Flexbox / Grid مرنة، تدعم توسيط العناصر الأفقية والعمودية، مناسبة للتخطيطات قد تربك المبتدئ لكثرة الخصائص أفضل استخدام لها عند وجود تخطيطات متعددة العناصر
- position + transform دقيقة، تعمل مع العناصر متغيرة الحجم لكنها أعقد قليلًا من الطرق السابقة وتحتاج فهم التموضع، أفضل استخدام لها عند وجود عناصر ديناميكية بالحجم
مثال كامل يشمل الثلاث طرق لتوسيط العناصر
في هذا المثال المتكامل سأعرض الطرق الثلاثة لتوسيط عنصر داخل حاوية:
الخاتمة
تعرفنا في هذا المقال على طرق منوعة لتوسيط عناصر حاوية، ورأينا أن كل طريقة لها مكانها المناسب، والاختيار يعتمد على احتياجات تصميمك.
- استخدم margin: auto للتوسيط البسيط.
- استخدم Flexbox/Grid عند التعامل مع عدة عناصر أو تخطيطات معقّدة.
- استخدم position + transform إذا كان حجم العنصر متغيّرًا وتريد دقة مطلقة.
