Why doesn't `iframe` auto margin center the iframe inside a div?

Question

I have a div and an iframe inside it. I want to make the iframe to be center. The margin: auto works for other dom but not the iframe. Is there a way for me to center the iframe inside the div?

 div { height: 300px; width: 300px; display: flex; } iframe { margin: auto; height: 50px; width: 50px; display: block; }

 <div> <iframe src="http://localhost:8080" align="right" /> </div>

Answer 1

Add ;important; to your iframe css tag

iframe {
  margin: auto !important;
}