معلومة ع السريع
النهاردة جايين نحل السؤال الأشهر في عالم الـCSS من أوله لأخره، إزاي تسنتر Div 😂، بص هي دي من أسهل الحاجات في الـCSS الصراحة ولكن خليني برضه أتكلم عنها لأن ممكن يبقى في حد مش عارفها
ببساطة انت عندك كذا طريقة، ممكن تعملها بالـPosition Absolute، ولكن دي طريقة سيئة ماتعملهاش على طول، ببساطة لو الموقع كبر منك أو المحتوى بيتغير هتتعب على ما تعدل الـFixed Values مرة تانية
الطريقة التانية بالـMargins، ودي ممكن تستخدمها عادي ولكن مهياش أفضل طريقة، لأن ببساطة لو عندك كذا عنصر في نفس الـContainer ممكن تسببلك مشاكل
الطريقة التالتة والرابعة، عن طريق استخدام الـGrid والـFlexbox، في الصورة هتلاقي مثال الـFlexbox واضح وصريح، والـGrid أسهل منه كمان!
ببساطة هنا انت بتدي الـContainer ارتفاعه الكامل 100%، بحيث ياخد ارتفاع الـViewport كله، وبعدين وتديله الـDisplay Flex، بحيث تقدر تتحكم في الـLayout بتاع المحتوى اللي جواه
ومن ثم تبدأ بقى تتحكم في الـLayout بالمحاور الرئيسية (الأفقي والطولي)، وتبدأ تقوله اعملي Align للـItems دي في الـCenter، وJustify (المحور التاني) في الـCenter برضه، وهوبا عرفت تسنتر الـDiv في النص 😄
بالنسبة للـGrid الموضوع أبسط بكتير، تقدر ببساطة تدي الـContainer الـDisplay Grid، وبعدين تقوله حطلي العناصر كلها في النص عن طريق
place-items: center;
وبس كدة، ده الموضوع ببساطة!
الجينيص
CSS Notes
الجينيص