Centering a button and responsive design - button

Question

I have a simple question about responsive design. I have a button that I want on the top right of the screen on PC but on the bottom center on mobile. Do I need to use #media or is there another way? I've tried text-align but it doesnt seem to work
.boton {
position: relative;
left: 80%;
top:5%;
font-family: 'Raleway', sans-serif;
font-size: 100%;
padding-right: 2%;
padding-left: 2%;
cursor: pointer;
#media screen and (max-width: 360px) {
.boton {
position:relative;
text-align:center;
}
<a href="mymail0#gmail.com">
<button class="boton">Contact Me</button>
</a>

Answer 1

You can use Transform property to do that, Just make element go 50% in left and translate it to -50% in x-axis means horizontally. Hope it works check out snippet. And you don't need to specify the position property when you are going to mobile screen, unless you don't want to change it as per your screen-width.
.boton {
position: relative;
left: 80%;
top:5%;
font-family: 'Raleway', sans-serif;
font-size: 100%;
padding-right: 2%;
padding-left: 2%;
cursor: pointer;
}
#media screen and (max-width: 360px) {
.boton {
text-align:center;
left : 50%;
transform : translateX(-50%);
}
}
<a href="mymail0#gmail.com">
<button class="boton">Contact Me</button>
</a>