To center align an iframe
using html
and css
, you can set text-align
to center
or can use flex
properties. Otherwise you can also set margin auto
to the parent DIV
.
Code Example –
1. Using text-align: center
in css –
<div class="iframe-parent">
<iframe src="https://akashmittal.com"></iframe>
</div>
<style>
.iframe-parent {
text-align: center;
}
</style>
2. Using text-align: center
as inline style –
<div style="text-align:center;">
<iframe src="https://akashmittal.com"></iframe>
</div>
3. Using flex
properties in css –
<div class="iframe-parent">
<iframe src="https://akashmittal.com"></iframe>
</div>
<style>
.iframe-parent {
display: flex;
align-items: center;
justify-content: center;
}
</style>
4. Using margin: auto
in parent div
<div class="iframe-parent">
<iframe src="https://akashmittal.com"></iframe>
</div>
<style>
.iframe-parent {
width: 500px;
margin: 0 auto;
}
</style>