title: Centering legend in Firefox
body: <h2>The problem</h2>
  <p>The problem is that the following works in Chrome, Opera and IE <sup><sub>(!?)</sub></sup> but does not work in Firefox:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>fieldset&gt;legend {
    display: table;
    float: none;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
    &lt;legend&gt;Legend&lt;/legend&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  <h3>Result in Chrome</h3>
  <p><img src="https://i.stack.imgur.com/kRU7e.jpg" alt="Result on Chrome" /></p>
  <h3>Result in Firefox</h3>
  <p><img src="https://i.stack.imgur.com/0HxbY.jpg" alt="Result on Firefox" /></p>
  <h2><strike>Solutions</strike> Hacks</h2>
  <p>There are a few questions around but none have satisfying answers:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* intended styling */
  fieldset&gt;legend {
      display: table;
      float: none;
      margin: 0 auto;
  }
  
  fieldset.absolute-fix {
      position: relative;
  }
  fieldset.absolute-fix&gt;legend {
      position: absolute;
      left: 50%;
  }
  
  fieldset.margin-fix&gt;legend {
      margin-left: 50%;
      margin-right: 50%;
      width: auto;
      transform: translate(-50%, 0)
  }
  
  fieldset.width-fix&gt;legend {
      width: 100%;
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset class="absolute-fix"&gt;
      &lt;legend&gt;Fix with absolute&lt;/legend&gt;
      &lt;p&gt;Not centered and inconsitant styling&lt;/p&gt;
      &lt;a href="http://stackoverflow.com/a/4006871/1185053"&gt;Source&lt;/a&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="attribute-fix"&gt;
      &lt;legend align="center"&gt;Fix with attribute&lt;/legend&gt;
      &lt;p&gt;Requires use of depreciated HTML and strongly ties presentation to content.&lt;/p&gt;
      &lt;a href="http://stackoverflow.com/a/19969606/1185053"&gt;Source&lt;/a&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="margin-fix"&gt;
      &lt;legend&gt;Fix with margin&lt;/legend&gt;
      &lt;p&gt;This is unsatisfying because there is a mis-aligned gap in the border and long legends go over several lines.&lt;/p&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="width-fix"&gt;
      &lt;legend&gt;Fix with width&lt;/legend&gt;
      &lt;p&gt;This is unsatisfying because there is a gaping hole in the border.&lt;/p&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>Question</h2>
  <p>Is there a way to constantly center <code>legend</code> in Firefox, whilst maintaining styling for other browsers?</p>