Ok, I've found the solution at the end.
I thought it was the text I needed to align and none of the versions I've tried worked. Then I realised it is a button, so I needed to centre the whole block instead.
<centre></centre> outside of the entire section worked well for me.
This is the final version:
<centre>
<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-button-element"
role="button" tabindex="0" data-dynamic-strings="" data-collection-id="60c9ced8924a473dc965693b"
data-item-id="62c70b35835d6f7315d892d2" data-product-type="3" data-use-custom-label="false"
data-original-label="Add To Cart" id="yui_3_17_2_1_1657212177086_333">
<div class="sqs-add-to-cart-button-inner">Pro VIP</div>
</div>
</centre>
Happy days.
It "only" took me a few hours to figure this out. Programming is not easy, especially when I haven't got a clue about the rules and language lol, but nothing is undiggable nowadays.
P-Wolf's post in How can I remove button (shape) around Add-to Cart button? was marked as the answer
