How to center iframe?

HTML-CSS
1

I’ve tried several methods, including text-align and flex, but the video still will not center.

HTML

 <div class="yt">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/cHgAqxbj19E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
  </div>

CSS

.yt{
  text-align: center;
}
iframe{
  display: inline-block;
}
2

I think you could do:

.yt { display: flex; flex-direction: row; justify-content: center; width: 100vw;  }
2 Likes