Выравнивание по центру

Есть вот такой код , как эти блоки выровнять по центру ?

<div class="button_marsh">


    <div class="button_marsh">
    <div class="contalner_marsh">
        <input type="checkbox" name="" ld="" class="btn"> 
        <div class="list">
        <a href="№" target="_blank"><i class="fas fa-user-alt"> </i>Московское шоссе <img src="https://static-sl.insales.ru/files/1/8042/17792874/original/Vector.svg"></a>
        <a href="№" target="_blank"><i class="fas fa-user-alt" > </i>Бугры <img src="https://static-sl.insales.ru/files/1/8042/17792874/original/Vector.svg"></a>
            
        </div>
        </div>   
    </div>
.button_marsh{

display: flex;

position: absolute;

margin-bottom:300px

}

.contalner{

display: flex;

width: 300px;

text-align: center;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

.btn{

    display: block;

    background-color: #50a467;

    border-radius: 100px;

    width:100%;

    margin:20px auto;

    text-align:center;

   

}

.btn::before{

content: 'Проложить маршрут в Я.Карты 'url(https://static-sl.insales.ru/files/1/8042/17792874/original/Vector.svg);

font-family:'Raleway',Arial,sans-serif;

color:#ffffff;

padding: 10px 20px;

text-decoration:none;

font: 400 18px tahoma;

vertical-align:middle;

display:table-cell;

width:500px;

text-align:center;

align-items: center;

width: 100%; height: 100%;

background: #50a467;

border-radius: 100px;

}

.list{

position: absolute;

margin-top: 0.5em;

width: 100%; height: 175px;

clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

display: flex;

flex-direction: column;

transition: all .4s;

margin-bottom:300px

   

}

input:checked ~ .list{ clip-path: none;}

.list a{

display: flex;

align-items: center; padding: 0.3em 0 0.3em lem; text-decoration: none; margin: 0.3em 0; background:#50a467; ;

border-radius: 100px;

color:#ffffff;

padding: 10px 20px;

text-decoration:none;

font-family:'Raleway',Arial,sans-serif;

font: 400 18px tahoma;

vertical-align:middle;

display:table-cell;

width:305px;

text-align:center;

height: 20px;

}

.list img{

    margin-bottom: -2px;

}

Тут сложно разобраться что происходит, как сейчас/как надо, и для запуска видимо этого кода недостаточно (выводит только точку на пару пикселей).

При выкладывании на форумы желательно создавать простой запускаемый пример.
http://sscce.org