Centering an element that has an aspect-ratio [closed]

16 viewsaspect ratiocsshtml
0

I’m having a weird issue when trying to center an element that has aspect-ratio applied. I’d assume it would behave similarly to how centering an image works but I keep ending up with an element of 0px x 0px.

https://codepen.io/richardcool/pen/xxeKOwp

I have created a basic CodePen to show the issue. If I uncomment the align-items: center line then the element becomes 0px x 0px. I have also tried centering using absolute positions and get the same issue.

Any thoughts?