Centering a Lottie Animation.

[ThijsV88]

Hello, I'm working on my store and want to add a Lottie Animation. When added it's not centered, sadly I don't know much about code. I've only added this in a plain custom liquid section, obviously it won't center, but the problem is that I don't know/cou a fix 😔. Hopefully someone can help me out with centering it (from as far as I know it does already properly center on mobile): 

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_uhsngkt4.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player >

Kinds regards,

T.

[ExpertRookie]

@ThijsV88 

Try to ad this code to a css file

lottie-player {
display: block;
margin : 0 auto;
}

Try it and let me know

[ThijsV88]

Hey thanks for the quick response! I won't lie, I'm not too sure if I'm doing it right, but I think it doesn't work. I've currently added your code to the bottom and top of a css file with the Lottie Animation. When doing that it will simply show up as plain text. Could definitely be the case that I'm doing something silly though... 

[ExpertRookie]

@ThijsV88 

Could you share your store URL? then I can review it

[ThijsV88]

Sure, it's: https://theanimeplushies.com/

[ExpertRookie]

@ThijsV88 

Try this code

<style>
lottie-player {
display: block;
margin : 0 auto;
}</style>

[ThijsV88]

Sadly this still doesn't seem to work for me

[ExpertRookie]

@ThijsV88 

I checked and it seems you does not use the new code yet.

[ExpertRookie · Accepted solution]

@ThijsV88 

You can add this code to Edit code > assets > base.css file at the end

lottie-player {
display: block;
margin : 0 auto;
}

[ThijsV88]

This seems to do the job, thanks a bunch!

[ExpertRookie]

@ThijsV88 you are welcome

[HELDERWRLD]

Hello mate,
I'm looking to do something similar. Does this way still work in 2023? I use the dawn theme and my site is: https://c04baf-2.myshopify.com/ (Diversusoficial is the code)

I want to do something like this: https://gemoo.com/tools/upload-video/share/567241571823239168?codeId=P5pqQ30lKl97K&card=567241566878...