@YacoubDweik
Posted
Hey Sayed! What a nice code and design! One little advice, it's gonna be much more better for you instead of just making the whole body as a flexbox what you can do is this: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); || Give it to the main element and see the magic! عاشت ايدك :)
Marked as helpful
@YacoubDweik Salam brother! Thank you for the kind words. Yes, that's a popular centering technique. Is there a performance benefit to using it over Flexbox? I wonder when would you prefer one over the other. Thanks again.
@YacoubDweik
Posted
@sydalwedaie Salam man!
It is the best practice so for for many reasons like:
-
Simplicity: This method involves fewer lines of code compared to setting up Flexbox or Grid properties, making it quick and easy to implement for simple centering needs.
-
Cross-browser Compatibility: This technique is well-supported across various browsers, including older versions, ensuring consistent results without the need for vendor prefixes or workarounds.
-
Consistent Centering: The combination of top: 50%; left: 50%; positions the element's top-left corner at the center of its containing element, and transform: translate(-50%, -50%); moves the element back by half of its own width and height, effectively centering it perfectly both horizontally and vertically.
-
No Parental Constraints: Unlike Flexbox or Grid, where the parent container's properties can affect the child element's positioning, absolute positioning allows the element to be centered independently of its parent's layout.
Marked as helpful
@YacoubDweik Thank you brother. Appreciated!
