webkit Center equivalent for IE and edge

Question

Is it correct to use display: block to center buttons on IE or should I look for a way using WebKit-center for other browsers?

@media screen and (max-width: 767px) {
    .flex {
        display:inline-block;
    }
    .flex_height {
        display:inline-block;
    }
    .grid_8 {
        background-repeat:no-repeat;
        width:98%;
        margin-left:1%;
        margin-right:1%;
        text-align:-webkit-center;
        text-align:-moz-center;
        margin-left:auto;
        margin-right:auto;
    }
}

<div class="grid_8">
    <button type="button" class="button_home mobile_on">
    *php code to generate text for a button here*
    </button>
</div>

Answer 1

An inline-block will wrap to the width of its content, so there's no point on centering a button inside an inline-block.

See:

.inline-block {
  display: inline-block;
  background-color: red;
}

<div class="inline-block">
  <button>Button Label</button>
</div>
<p><em>As you can see, the button is already centered inside the red inline-block.</em></p>

Instead, you could use a regular block (not inline) element with text-align: center to center the button.

div {
  background-color: red;
  text-align: center;
}

<div>
  <button>Button Label</button>
</div>

Or, if you really need this inline-block element, then you'll have to wrap it all in an outer wrapper:

.wrapper {
  text-align: center;
}

.inline-block {
  display: inline-block;
  background-color: red;
}

<div class="wrapper">
  <div class="inline-block">
    <button>Button Label</button>
  </div>
</div>

Besides that, you could also use some hacks as relative positioning, negative margins or transforms. But, I'd try to keep it simple.

.inline-block {
  display: inline-block;
  position: relative;
  left: 50%;
}

#blue {
  background-color: blue;
  margin-left: -41px; /* Magic number. Not recommended! */
}

#red {
  background-color: red;
  transform: translateX(-50%); /* Much better, but still... */
}

<div>
  <div id="blue" class="inline-block">
    <button>Button Label</button>
  </div>
</div>

<div>
  <div id="red" class="inline-block">
    <button>Button Label</button>
  </div>
</div>