Как задать margin: 0 auto; если position для родительского элемента стоит absolute?

Question

[Алексей Гончаров]

Здравствуйте, у меня есть блок:

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

Мне нужно было выровнять блок mainscreen__content по центру вертикально и для этого я ему задал:

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

И теперь из-за этого блока не работает container, не работает значение margin: 0 auto;
А мне нужно чтобы отступы автоматически определялись слева и справа,
теперь это не работает из-за вертикального выравнивания.
Какое решение здесь мне порекомендуете? Чтобы и вертикально блок выровнять и чтобы margin: 0 auto; работал.

Заранее спасибо

Answer 1

[Дмитрий Марков]

Я бы порекомендовал убрать position: absolute;
и выровнять mainscreen__content с помощью display:flex; align-items: center; (это надо написать родителю)
и тогда margin: 0 auto должен работать

Comments

[Алексей Гончаров]

Все равно не заработал

[Дмитрий Марков]

Не верю)

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrapper {
            display: flex;
            align-items: center;
            min-height: 100vh;
        }

        .block-vertical-middle {
            background-color: rgb(219, 214, 206);
            width: 100%;
        }
        .block-horizontal-middle {
            background-color: rgb(199, 132, 33);
            margin: 0 auto;
            height: 50px;
            max-width: 1200px;
        }
    </style>
        <div class="wrapper">
            <div class="block-vertical-middle">
                <div class="block-horizontal-middle"></div>
            </div>
        </div>