Left/Right percentages differences between browsers - html

Question

I'd like to have a button at the bottom of a table, in the middle of the bottom of the table, centered. I did add left:30% and right:30% so the button locates at the middle, however, I noticed in Chrome this get rendered differently than Safari or Firefox, in Chrome, the percentages are not the same, thus the button ends up a little more to the left than right, and not centered/middled. Try it below.
How can I get this to work the same in Chrome too? Why are the percentages rendered differently, what's the best technique to centre this element that needs to be in absolute positioning?
.panel {
background-color: #fff;
border-radius: 10px;
padding: 15px 25px;
position: relative;
width: 100%;
z-index: 10;
}
.table {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
height:350px;
background:lightblue;
}
.table * {
text-align: center;
}
.contact-button {
bottom: -25px;
background: #f9f9f9;
border-radius: 10px;
left: 30%;
right: 30%;
margin: 0 auto;
position:absolute;
}
.btn {
display: inline-block;
padding: 8px 32px;
cursor: pointer;
text-align: center;
vertical-align: middle;
white-space: nowrap;
outline: none;
line-height: inherit;
background-color: white;
border: 1px solid black;
color: black;
font-size: 14px;
letter-spacing: 2px;
}
<div class="panel table">
<button class="btn contact-button">CONTACT MORE INFO</button>
</div>

Answer 1

You can just move the button from the div and create something like this
<div class="panel table"></div>
<div class="wrapper">
<button class="btn contact-button">CONTACT MORE INFO</button>
</div>
This way you don't have to use position:absolute; you can just use
display:flex;
justify-content:center;
If you want more support for older browser versions, please check this article
Check the example below
.panel {
background-color: #fff;
border-radius: 10px;
position: relative;
width: 100%;
z-index: 10;
}
.table {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
height: 350px;
background: lightblue;
}
.table * {
text-align: center;
}
.contact-button {
bottom: -25px;
background: #f9f9f9;
border-radius: 10px;
left: 30%;
right: 30%;
margin: 0 auto;
}
.btn {
display: inline-block;
padding: 8px 32px;
cursor: pointer;
text-align: center;
vertical-align: middle;
white-space: nowrap;
outline: none;
line-height: inherit;
border: 1px solid black;
color: black;
font-size: 14px;
letter-spacing: 2px;
}
.wrapper {
display: flex;
justify-content: center;
}
body {
margin: 0;
}
<div class="panel table">
</div>
<div class="wrapper">
<button class="btn contact-button">CONTACT MORE INFO</button>
</div>

Answer 2

You can use this also it may help you without changing much things:
.contact-button {
background: #f9f9f9;
border-radius: 10px;
margin: 0 auto;
margin-top:370px;
}
have a look on this bin: https://jsbin.com/gipibecedu/edit?html,css,output