Have a Pesky Centering Issue With Button - html

Question

I want to center the "view" buttons on my Writings and Projects page, on portrait-oriented mobile devices. However, I can't quite get this to work. Sub-optimally, I've been using translateX as a bandaid solution; however, this doesn't get the job done on multiple screen widths. Here is my current code:
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
#media screen and (max-width: 414px) {
.image-button-wrapper {
max-width: 150px;
transform: translateX(56%);
}}
So far, none of the centering tricks I can think of have proven effective: margin: 0 auto;, text-align: center;, etc. Does anybody have a clue how to fix what should be a simple issue?
Thanks in advance!
Tyler

Answer 1

I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.
For example for horizontal unknown width:
use this :
.image-button-wrapper {
width:100%;
height:100vh;
position:relative
}
.image-button-inner {
width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
left: 50%;
padding: 20px;
resize: both;
overflow: auto;
max-width: 150px;
text-align: center;
}
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
For Vertical use this :
.image-button-wrapper ,.image-button.sqs-dynamic-text{
width:100%;
height:100vh;
position:relative
}
.image-button-inner {
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
top: 50%;
resize: both;
overflow: auto;
max-width: 150px;
text-align: center;
display:table;
vertical-align:center;
}
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
and for both use :
.image-button-wrapper ,.image-button.sqs-dynamic-text{
width:100%;
height:100vh;
position:relative
}
.image-button-inner {
width: 100%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
left: 50%;
top:50%;
padding: 20px;
resize: both;
overflow: auto;
max-width: 150px;
text-align: center;
}
<div class="image-button-wrapper">
<div class="image-button sqs-dynamic-text">
<div class="image-button-inner">
View
</div>
</div>
</div>
To know more this is why transform:translate(-50%) is used :