htmlcssiframealignmentcenter-align

How to center an iframe horizontally?

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:

enter image description here

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

Solution

  • 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>