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?
As long as there is no content in your div that determines the size, you have to specify either a width or a height when using aspect-ratio
and align-items: center
. For example like this:
div.video {
height: 50vh;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
div.poster {
aspect-ratio: 16 / 9;
background-color: yellow;
max-height: 60%;
max-width: 60%;
height: 60%;
}
<div class="video">
<div class="poster"></div>
</div>