The position is happening only on the left top corner. How to set it in the middle of the screen?

[DercilioFontes]

I wonder if that is an issue or if I must do something. But the element is positioned at the left top corner, and I couldn't change that.

[lub0v]

Hey @DercilioFontes, try to place it inside the container that is positioned the way you want.

<div style={{ position: 'absolute', top: '50%', left: '50%' }}>
<ConfettiExplosion/>
</div>

[DercilioFontes]

Hi @lub0v,

It worked.

I also needed to move the component to be a child of my IonPage component. It was in inside components with if/else conditions.

    <IonPage className="hiddenScrollbar">
      {showAnimation ? (
        <div style={{ position: 'absolute', top: '50%', left: '50%' }}>
          <ConfettiExplosion
            colors={['#284A5A', '#2D8278', '#476482', '#479B5A']}
            width={1400}
            force={0.6}
            particleCount={200}
          />
        </div>
      ) : null}

Thank you.