How to center a div that has absolute positioning without a set width

I would like a div that has absolute positioning and text generated by JavaScript to be in the center of the screen I do not want a set width or height on the element

I have already tried

    .element {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
    }

but this would sometimes cause the text to overlap.

I also tried this

    .parent {
       display: flex; 
       justify-content: center;
    }

but this had some weird glitch where it would not take effect until I hovered over an element with a scale effect.