I have a Google Sheet that I want to embed as HTML on my website. The embed works fine but it appears left-aligned on the page. I need to center it horizontally so it looks better.
I tried wrapping the embed iframe in a div with text-align center but that didn’t work. The sheet just stays on the left side of the page.
Is there a way to modify the embed code or use some CSS to make it appear centered? I want to keep using the same embed URL if possible. Maybe there’s a Google Apps Script solution that could help with this?
Any suggestions would be really helpful. I just need the embedded spreadsheet to show up in the middle of the page instead of stuck to the left side.
Yeah, this iframe centering thing with Google Sheets is super common. I ran into it embedding quarterly reports on our client portal. Here’s what actually worked: wrap your iframe in a div and use flexbox. Set the container to display: flex and justify-content: center. Add align-items: center if you need vertical centering too. Way more reliable than the margin auto trick, especially for responsive stuff. One thing - make sure your iframe has a set width instead of defaulting to 100%. Otherwise there’s nothing to center. I usually go with width: 80% or something fixed like 800px depending on what’s in the sheet. This flexbox approach has been solid across all browsers for me.
Put everything in a container div with text-align: center, then set your iframe to display: inline-block instead of block. That’s what fixed it for me with the same issue. Unlike regular block elements, inline-block actually responds to text-align.
This happens because iframes are block elements by default. Text-align won’t work on the parent div here. Set the iframe to display: block and use margin: 0 auto to center it. You can also wrap it in a div with text-align: center if needed. If your iframe’s taking the full container width, give it a specific width. I ran into this exact issue embedding sheets on our company site last year. What fixed it was adding max-width: 100% along with margin: 0 auto. Keeps it centered on big screens and prevents overflow on mobile.