title: webkit Center equivalent for IE and edge
body: <p>Is it correct to use <code>display: block</code> to center buttons on IE or should I look for a way using WebKit-center for other browsers?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid_8"&gt;
      &lt;button type="button" class="button_home mobile_on"&gt;
      *php code to generate text for a button here*
      &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>