html - How to center an iframe horizontally?

Question

Consider the following example: (live demo)

HTML:

<div>div</div>
<iframe></iframe>

CSS:

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

Result:

Why the iframe is not centrally aligned like the div? How could I centrally align it?

Answer 1

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>