👀 Views: 89 💬 Answers: 1 📅 Created: 2025-06-15

css flexbox safari CSS

I'm converting an old project and I'm optimizing some code but I'm working with an scenario with flexbox not centering items as expected in older versions of Safari (specifically version 12.1)... I've used a simple flex container and I'm trying to center the items both vertically and horizontally. My CSS looks like this: ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .item { width: 100px; height: 100px; background-color: lightblue; } ``` However, in Safari, the items seem to be aligned to the top left instead of the center. I've checked for any parent elements that might be affecting the layout, and I also made sure to reset any default margins and paddings on the body and html elements: ```css body, html { margin: 0; padding: 0; height: 100%; } ``` I also tried adding `flex-direction: column;` to see if it would have any effect, but it didn't help. I am aware that older versions of Safari may not fully support some flex properties, but this seems like a basic use case. Is there any workaround to ensure consistent behavior across browsers, especially for older Safari versions? Any insights or fixes would be greatly appreciated. I've been using Css for about a year now. My team is using Css for this application.