Trouble center aligning Bandcamp embed

Your first iframe code is missing margin: auto in the inline CSS to center it.

And the second iframe code has errors — this is clearly wrong (I’ve truncated the code to show the problematic part):

<iframe style="" margin:="" 0="" auto;="" align="”center”" src="...

The iframe code below should work (Please note that this is the full iframe code for one of your widgets. In Gutenberg, you’d put this into a Custom HTML block — but I don’t know how you insert this into Elmentor, as I’m not familiar with it 😀 )

<iframe style="display: block; margin: 0 auto; width: 700px; border: 0; overflow: hidden" src="https://bandcamp.com/EmbeddedPlayer/track=36058410/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/"><a href="https://snowdropsound.bandcamp.com/track/litha-2020-eight-of-cups">Litha 2020 - Eight of Cups by maia snowdrop</a></iframe>

Note that I’m using the same 700px width as you have already defined for the widget. You don’t need the align="center" attribute, and the seamless attribute was a proposal that never made its way into the HTML technical standard, and no browser supports it.

UPDATE:

If you’re going to have a lot of these widgets throughout your site, it’ll be better to use external CSS to center all the widgets at once, rather than adding the CSS inline in the iframe code. This should work (you can put in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS) — and you wouldn’t need the style attribute in the iframe tag at all.

.elementor-shortcode iframe {
display: block; 
margin: 0 auto; 
width: 700px; 
border: 0; 
overflow: hidden;
}

Good luck!

However it doesn’t appear to be working – when I add another widget after adding the CSS, it’s left aligned.

The CSS code is actually working, except it’s been overridden by the inline CSS code in your iframe widget. As you can see from the screenshot below, your iframe has an inline CSS style specifying a width of 100% of the parent container. This inline CSS has higher “power” than the external CSS injected in the head. And if something has a width of 100%, you wouldn’t see it centered.

As I said in my earlier post, you don’t need the inline CSS style at all if you’re using the external CSS code. So you can remove the width (or the entire style attribute) from the iframe code. Alternatively, use “brute-force” to give the external CSS higher power than the inline CSS in the iframe by adding !important, like this:

.elementor-shortcode iframe {
display: block; 
margin: 0 auto; 
width: 700px !important; 
border: 0; 
overflow: hidden;
}