Есть вот такой код , как эти блоки выровнять по центру ?
<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;
}