How can I center an iFrame on my webpage?

Technical Q&A
,

Topic summary

A user is struggling to center an iframe element that remains stuck on the left side of their webpage despite attempts to fix it.

Code provided:

  • The iframe is wrapped in a <div> with position: relative and width: 75%
  • Styling includes align-items: center and margin: auto
  • The code snippet appears corrupted or reversed in the original post

Solution offered:
Another user provided a CodeShare link containing corrected code to resolve the centering issue.

Status: The problem appears resolved with the shared code solution, though the specific fix details aren’t visible in the discussion text itself.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello! I am trying to center this iFrame, but no matter what I try it is stuck to the left side. Any help would be greatly appreciated. Thank you!

<div style="position: relative; width: 75%; height: 0; padding-top: 82.357275%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform; align-items: center;
    margin: auto;"><iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0 auto; display: block; border-style: none;" src="https://www.canva.com/design/DAF5Cx0xHbo/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe></div>
<a href="https://www.canva.com/design/DAF5Cx0xHbo/view?utm_content=DAF5Cx0xHbo&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank"></a>
2

Hi,

Please check this code and it will resolve your issue.

https://codeshare.io/9bpRAV