htmlcssaspect-ratio

Centering an element that has an aspect-ratio


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?


Solution

  • 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>