👀 Views: 17 💬 Answers: 1 📅 Created: 2025-06-22

css flexbox safari CSS

I recently switched to I'm maintaining legacy code that Hey everyone, I'm running into an issue that's driving me crazy... I'm stuck on something that should probably be simple. I'm currently working with an scenario with CSS Flexbox where nested elements are not centering properly in Safari. I've created a simple layout with a parent container that is supposed to center its child elements both vertically and horizontally. However, in Safari, the children are aligned to the start instead of the center. Here’s a simplified version of my code: ```css .parent { display: flex; justify-content: center; align-items: center; height: 100vh; } .child { width: 200px; height: 200px; background-color: lightblue; } ``` ```html <div class="parent"> <div class="child"></div> </div> ``` I've tested this layout in Chrome and Firefox, and it works perfectly, but in Safari (latest version 16.5), the child element is aligned to the top left corner of the parent container instead of being centered. I've tried adding `flex-direction: column;` to the parent class, but that didn't resolve the scenario. Additionally, I checked for any CSS reset or global styles that might affect this layout, but nothing stood out. The unexpected behavior is quite puzzling, as I also verified that there are no conflicting styles applied. Is there a known workaround or a better approach to achieve consistent centering across browsers, especially in Safari? Any insights on how to address this would be greatly appreciated! Any help would be greatly appreciated! I'm working in a Windows 10 environment. I'd really appreciate any guidance on this. For reference, this is a production mobile app. Thanks for taking the time to read this!