توسيط العناصر أفقيا وعرضيا بكل الطرق في لغة CSS

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

في الشكل التالي سوف تجد المربع الرمادي وهو العنصر الأب وداخله العنصر المراد توسيطه أفقيا وعرضيا ملون باللون البرتقالي. وسوف تجد علامة التقسيم في المربع الرمادي بالطول والعرض لتري من أين يبدأ المنتصف سواء أفقيا أو عرضيا, والتنسيقات التالية ليظهر لك هذا الشكل ولكن بدون الفواصل التي تحدد المنتصف.

ماذا يحدث لو قمنا بوضع ال Child في الوضع المطلق Absolute وعند قيمة ال Left نعطيه 50% معناها أنه سوف يبدأ من عند 50% من عرض الأب من اليسار معناها أنه سيبدأ من المنتصف تماما وماذا يحدث لو وضعنا قيمة ال Top أيضا 50% معناها أنه سيبدأ من عند 50% من طول العنصر الأب أي أنه سيبدأ من المنتصف طوليا. شاهد الصورة والخواص لتفهم الفكرة.

الآن العنصر الإبن يبدأ من المنتصف تماما الخاص بالعنصر الأب والذي يتم تحديده بواسطة الخط الفاصل الذي يقسم العنصر قسم يمين وقسم يسار وكل ما نريده الآن هو وضع نصف العنصر على يمين الخط الفاصل والنصف الآخر على يسار الخط الفاصل ولنفعل ذلك يجب حساب عرض العنصر وهو 150 بيكسل ولذلك نحتاج لأن نجعله يتحرك ناحية اليسار لنجعل النصف على يسار الخط الفاصل كما ذكرنا ونصف حجم العنصر هو 75 بيكسل ولذلك سوف نستخدم ال Margin بالسالب لعمل هذه العملية ونقوم بوضع margin-left: -75px; والآن أصبح نصف العنصر 75 بيكسل موجودين على يسار الخط الفاصل والنصف الآخر على يمين الخط الفاصل, شاهد الخواص والمثال لتفهم ما حدث.

والآن لدينا خط فاصل يقسم العنصر جزءين الجزء العلوي والجزء السفلي ونحتاج نصف العنصر الإبن أن يكون في الجزء العلوي والنصف الآخر في الجزء السفلي ولعمل ذلك نحتاج أن نعرض طول العنصر وهو 75 بيكسل والنصف هو 37.5 بيكسل ولذلك سوف نستعمل ما تم عمله سابقها لتحريك العنصر للأعلى وسوف نقوم بعمل margin-top: -37.5px; لتحريك نصف العنصر للأعلى ليصبح نصفه في الجزء الأعلى والنصف الباقي في الجزء الأسفل, شاهد الخواص والصورة لتفهم الفكرة.

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

في الشكل التالي سوف تجد المربع الرمادي وهو العنصر الأب وداخله العنصر المراد توسيطه أفقيا وعرضيا ملون باللون الأزرق. وسوف تجد علامة التقسيم في المربع الرمادي بالطول والعرض لتري من أين يبدأ المنتصف سواء أفقيا أو عرضيا, والتنسيقات التالية ليظهر لك هذا الشكل ولكن بدون الفواصل التي تحدد المنتصف.

ماذا يحدث لو قمنا بوضع ال Child في الوضع المطلق Absolute وعند قيمة ال Left نعطيه 50% معناها أنه سوف يبدأ من عند 50% من عرض الأب من اليسار معناها أنه سيبدأ من المنتصف تماما وماذا يحدث لو وضعنا قيمة ال Top أيضا 50% معناها أنه سيبدأ من عند 50% من طول العنصر الأب أي أنه سيبدأ من المنتصف طوليا. شاهد الصورة والخواص لتفهم الفكرة.

والآن كما في المثال السابق نحن نحتاج لتحريك العنصر لليسار ليكون نصفه قبل الخط الفاصيل ونصفه بعد الخط الفاصل وذكرنا أن عيوب الطريقة السابقة أننا نحتاج لمعرفة عرض وطول العنصر وهنا لا نحتاج لك هذا ولن تسعمل ال Margin وسوف نستعمل خاصية ال Transform => Translate والتي تقوم بتحريك العنصر من مكانه ولدينا transform: translateX() لو أردنا تحريك العنصر عرضيا ولدينا transform: translateY() لو أردنا تحريك العنصر طوليا وهنا شرح بالتفصيل للخاصية CSS3 Transform Translate وإذا أردت التحريك عرضي وأفقي تستعمل فقط transform: translate() بدون X ولا Y والآن نحن نحتاج لتحريك العنصر لليسار بقدر نصف العرض الخاص به وللأعلى بقدر نصف الطول الخاص به ولذلك نستعمل خاصية transform: translate(-50%, -50%); وهنا 50% هو نصف العرض أو نصف الطول والسالب معناها تحريك للوراء وليس للأمام والآ، شاهد الخواص والصورة لترى ما حدث.

تم توسيط العنصر بنجاح وهذه طريقة رائعة لكن هناك ما هو أروع منها.

في الشكل التالي سوف تجد المربع الرمادي وهو العنصر الأب وداخله العنصر المراد توسيطه أفقيا وعرضيا ملون باللون الأحمر. وسوف تجد علامة التقسيم في المربع الرمادي بالطول والعرض لتري من أين يبدأ المنتصف سواء أفقيا أو عرضيا, والتنسيقات التالية ليظهر لك هذا الشكل ولكن بدون الفواصل التي تحدد المنتصف.

الآن روعة هذه الطريقة أننا لا نحتاج ل Position ولا ل Margin بقيمة سالبة ولا للتلاعب بالعنصر الأبن ولا لمعرفة عرضه أو طوله فكل ما عليك هو وضع الخواص التالية في الأب ليتم توسيط العنصر الموجود داخله بسهولة وبساطة.

تم التوسيط بنجاح وهذه هي أفضل الطرق من وجهة نظري وشكرا لكم.