How to set margin: 0 auto; if the parent element's position is set to absolute?

Question

css

Hello, I have a block:

<div class="mainscreen__content">
    <div class="container">
    </div>
</div>

I needed to center the mainscreen__content block vertically, and for this I asked him:

.mainscreen__content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

And now, because of this block, container does not work, the value of margin: 0 auto does not work;
And I need indents to be automatically determined on the left and right,
now this does not work due to vertical alignment.
What solution would you recommend for me? To vertically align the block and to margin: 0 auto; have worked.

Thanks in advance

Answer 1

I would recommend removing position: absolute;
and align mainscreen__content with display:flex; align-items: center; (this should be written to the parent)
and then margin: 0 auto should work