Button not centring in CSS - html

Question

I have created a div container and within the container, there is a div box. Inside the box, I have a button that is supposed to be centered at the bottom of the box.
I have searched around and before anyone does the "duplicate post" I have tried everything that they've said. Such as, adding a "display: block;" into my code etc and still it's not centering the button into the middle. I have been messing around with whatever I can think of to try and centering the button but nothing is working.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>

Answer 1

These three values set properly on your mainButton CSS should solve your issue:
width: 40%;
left:50%;
margin-left:-20%;
Its key to note what the calculation is here. The left property is centering the item at 50% of the page, and the negative margin-left is offsetting the items position in accordance with its width. Since its width is 40% the negative margin has to be half of this, ie 20%. With this in mind you can adjust the width and the offset if your design changes, better yet using css variables and calc() mean that you could set the width only and the margin would calculate itself.
As an example:
left:50%;
--buttonWidth: 40%;
width: var(--buttonWidth);
margin-left:calc( var(--buttonWidth) / -2);
.container{
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1{
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton{
position: absolute;
bottom: 0;
padding: 7px 5px;
width: 40%;
left:50%;
margin-left:-20%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton{
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<a href="http://www.google.co.uk">
<button type="button" id="mainButton"> Go To Website</button>
</a>
</div>
</div>

Answer 2

Try with this code, i think this will help u in fixing the issue.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
padding: 5px;
width: 60%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}

Answer 3

Just add "left: 0; right: 0;" in #mainButton
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
left:0px;
right:0px;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>

Answer 4

It's because your button's parent is a link tag. Your button is not a direct child of the flexbox