السلام عليكم ورحمة الله

لاحظت الكثير من مطوري الويب يستخدمون طرق غير مباشرة لتوسيط العناصر باستخدام javascript مثلاً

الطريقة الاولي باستخدام position

الاستخدام

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

الطريقة

يجب ان يملك العنصر نوع position من fixed او absolute

في البداية سنقوم بتحديد left: 50% و top: 50% ان لاحظت لن تجده توسيط حقيقي لان الرسم سيبدأ من 50% من الايسر ومن الاعلي ايضاً اذاً ستكون كالتالي

https://jsfiddle.net/k8d753kL

اذاً لتحقيق التوسيط يجب ان نقوم بتحريك العنصر 50% من لليسار و 50% الي الاعلى اذاً سنستخدم

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

ليكون كالتالي https://jsfiddle.net/t5eLbkor

اذاً الكود النهائي

.center{
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 }

ملاحظات

اذا كنت تريد العنصر متحرك مع الشاشة اجعله position : fixed لتوسيط عنصر داخل عنصر اكبر يجب ان يحتوي العنصر الاكبر علي position: relative هناك متصفحات اخري لاتدعم transfrom بشكل مباشر و يجب اضافة بادئة للكود -webkit-transform -moz-transform -o-transform

-ms-transform

الطريقة الثانية margin:auto

الاستخدام

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

الطريقة

يجب ان يحتوي العنصر علي display من نوع block ويجب ايضاً ان يحدد بعرض اقل من العنصر الاكبر له مثال https://jsfiddle.net/gmhzk57p

ليكون الكود

 .center{
 margin: auto;
 display: block
 }

ملاحظة

هذه الطريقة تقوم بالتوسيط بين البعد اليسار واليمين فقط ولاتقوم بالتوسيط بين البعد الاعلي والاسفل

لتوسيط عنصر لايحتوي علي display: block بشكل تلقائي مثلاً صورة يجب ان تضع display: block

---

الطريقة الثالثة ;text-align: center

الاستخدام

تستخدم هذه الطريقة لتوسيط العناصر او النصوص من مميزات هذه الطريقة يمكنها توسيط اكثر من عنصر في نفس العنصر الكبير معاً

الطريقة

يتم وضع text-align: center في العنصر الاكبر العنصر الاصغر يجب ان يحتوي علي display من نوع inline او inline-block يفضل استخدام inline-block لتستطيع التحكم في العرض و margin وpadding مثال

https://jsfiddle.net/gngz3a...

مثال اخر لاكثر من عنصر معاً

https://jsfiddle.net/mrbfnp...

ملاحظات للتوسيط من الاعلي يمكن اضافة vertical-align: middle; مع line-height بطول العنصر الاكبر

يوجد طرق اخرى وانا فقط قمت بالتحدث عن الثلا الاشهر .