Quick Tip - Centre an iframe in Blogger Using CSS

I draft most of my blog posts in a text editor before uploading them to Blogger. The advantage is that I keep a local copy (for prosperity or vanity I have yet to determine) and I can play around with presentation and layouts at my leisure. However, it's often easier to get things where you want them using CSS in a text editor than in Blogger itself but, for routine settings, you can customise the style sheet in Blogger and make the changes permanent.

Today, I wanted to centre an embedded video (an iframe), so I updated my style sheet as indicated below:

1. From your Blogger home page, click the more options drop-down list & click the Template option.

2. Click the Customise option.

3. Click the Advanced option & then scroll down to Add CSS option.

4. Add the following code in the Add custom css text box:
iframe { display: block; margin: 0 auto; border: 0; }
5. Click Apply to Blog button (top RHC of web page).

This should work with any CSS, but bear in mind that it will become the default style once the code is uploaded. In this case, all iframe objects on this blog will be centred from now on.

Sources & References:

• None