title: Custom css toggle switch align issue in firefox
body: <p>I have custom toggle switch inside a table. I want them vertically and horizontally centered in the cell. While they are appearing as intended in Chrome and Safari, they are slightly shifted down on firefox. A solution or a better way to implement this is much appreciated. Below is my html and css codes:</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>html
  {
    font-size: 15px;
    
  }
  
  input[type=checkbox]{
      height: 0;
      width: 0;
      visibility: hidden;
  }
  
  .checkboxcell {
    width: 100%;
    height: 1.66rem;
  }
  
  .toggle + label {
      cursor: pointer;
    display: block;
    width: 100%;
      height: 1.6rem;
      background: #DD7E6B;
      border-radius: 1.6rem;
      position: relative;
    top: -1.15rem;
  }
  
  .toggle:checked + label {
      background: #2ECC71;
  }
  
  .toggle + label:after {
      content: '';
      position: absolute;
      top: 0.3rem;
      left: 0.3rem;
      width: 1rem;
      height: 1rem;
      background: steelblue;
      border-radius: 6rem;
      transition: 0.3s;
  }
  
  .toggle:checked + label:after {
      left: calc(100% - 0.3rem);
      transform: translateX(-100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    
  &lt;table width="50%" cellpadding="2" border="1" cellspacing="0"&gt;&lt;tr align="center"&gt;&lt;th colspan="2"&gt;Access Status&lt;/th&gt;&lt;/tr&gt;
         &lt;tr align="center"&gt;&lt;th width="50%"&gt;Workload&lt;/th&gt;&lt;th&gt;Time Table&lt;/th&gt;&lt;/tr&gt;
         &lt;tr align="center"&gt;&lt;th&gt;&lt;div class="checkboxcell"&gt;&lt;input type="checkbox" class="toggle" checked/&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/th&gt;
         &lt;th&gt;&lt;div class="checkboxcell"&gt;
           &lt;input type="checkbox" class="toggle"/&gt;&lt;label&gt;&lt;/label&gt;
         &lt;/div&gt;&lt;/th&gt;&lt;/tr&gt;
         &lt;tr align="center" height="25"&gt;&lt;th colspan="2"&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;
    
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>