Center align IFrame – Code Example

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>