How to center a iframe tag in react using tailwind css?

Question

I want my iframe tag to be displayed at the center of the page but its aligned to the left. The iframe is inside a div tag on which I have tried applying flex items-center and flex justify-content , but nothing workds. here is the code :-

 <div className="flex items-center" >
      
      <iframe width="600" height="400" src="https://www.youtube.com/embed/RB1uDVnhVq0?si=d0DlD-AjqmaPlnEF" title="YouTube video player" frameBorder="40% " allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    
    </div>.

Please tell me how to center this iframe.

I have tried applying flex items-center and flex justify-content on the div tag. I wanted to use align attribute in iframe tag but its showing there is no such property. its running a youtube video.

Answer 1

Add justify-center to the classname of div.

<div class="flex items-center justify-center">
  <iframe
    width="600"
    height="400"
    src="https://www.youtube.com/embed/RB1uDVnhVq0?si=d0DlD-AjqmaPlnEF"
    title="YouTube video player"
    frameborder="40% "
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>
</div>

Check this out - Code Sandbox