How to center an iframe horizontally?

Question

Consider the following example: (live demo)

HTML:

div

CSS:

div         


        

Answer 1

The simplest code to align the iframe element:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

Answer 2

Add display:block; to your iframe css.

div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style:none;
}

<div>div</div>
<iframe src="data:,iframe"></iframe>

Answer 3

You can try

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

I hope its useful for you

link

Answer 4

If you can't access the iFrame class then add below css to wrapper div.

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>

Answer 5

best way and more simple to center an iframe on your webpage is :

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

where width and height will be the size of your iframe in your html page.

Answer 6

Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally. Give me THUMBS UP VOTE if you like.