Как можно расположить кнопку по центру картинки? [требует правки]

*{ 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
 
html, 
body{ 
    height: 100%; 
} 
 
body{ 
    background: #ccc; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

<button>Заказать услугу</button>

*{ 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
 
html, 
body{ 
    height: 100%; 
} 
 
body{ 
    background: #ccc;   
    position: relative; 
} 
 
button{ 
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
}

<button>Заказать услугу</button>

body { 
margin:0; 
} 
.buy { 
display:flex; 
align-items:center; 
justify-content:center; 
height:100vh; 
} 
.button { 
padding:10px; 
border:1px solid #095; 
border-radius:5rem; 
color:#095; 
text-decoration:none; 
font-family:sans-serif; 
transition:1s all; 
} 
.button:hover { 
background:#095; 
color:white; 
}

<div class="buy"> 
  <a class="button" href="javascript:void(0)">Заказать услугу</a> 
</div>