title: How to vertically align input file button?
body: <p>All the rest of my form elements center, except for my input file button.</p>
  
  <p>I've tried:</p>
  
  <pre><code>.box {
      display: block;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>To get it to center, but it's still left-aligned. Looking on Chrome developer tools, it seems like the <code>.box</code> takes up the entire width, but I'm not sure why because I never set the <code>width</code></p>
  
  <p>If anyone could help me out that would be greatly appreciated!</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>@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
  
  /*General styling &amp; remove auto styling*/
  
  body {
      margin: 0;
  }
  
  button {
      border: none;
      font-family: 'Roboto', sans-serif;
      cursor: pointer;
      background-color: rgba( 15, 72, 204, 0);
  }
  
  /*Remove auto styling*/
  
  .submit:focus,
  .close:focus,
  .inputfile:focus + label {
      outline: white auto 5px;
  }
  
  .form-screen {
      background: #3472FF;
      color: white;
      font-family: 'Roboto', 'sans-serif';
  }
  
  .close {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 2em;
      color: white;
  }
  
  .close:hover {
      color: #d8d8d8;
  }
  
  .form-wrapper {
      padding-top: 5%;
      padding-bottom: 5%;
  }
  
  .form-wrapper h1 {
      text-transform: uppercase;
      font-weight: 500;
      text-align: center;
      font-size: 3em;
  }
  
  
  /*Style input file*/
  
  .inputfile {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
  }
  
  .inputfile + label {
      max-width: 80%;
      font-size: 1.4em;
      font-weight: 500;
      text-transform: uppercase;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      padding: 20px 20px 20px 20px;
  }
  
  .inputfile + label svg {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      fill: currentColor;
      margin-top: -0.25em;
      /* 4px */
      margin-right: 0.25em;
      /* 4px */
  }
  
  
  /* style 1 */
  
  .inputfile-1 + label {
      color: #3472FF;
      background-color: white;
  }
  
  .inputfile-1:focus + label,
  .inputfile-1.has-focus + label,
  .inputfile-1 + label:hover {
      background-color: #d8d8d8;
  }
  
  
  /*Form input elemnts*/
  
  input[type="text"],
  .submit, .box {
      display: block;
      margin: 0 auto;
  }
  
  input[type="text"] {
      cursor: text;
      border: none;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      color: #3472FF;
      font-size: 2em;
      padding: 20px 20px 20px 20px;
      margin-bottom: 40px;
      width: 60%;
  }
  
  input[type="text"]::-webkit-input-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      color: #3472FF;
      font-size: 1em;
  }
  
  input[type="text"]:-ms-input-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #3472FF;
      font-size: 1em;
  }
  
  input[type="text"]:-moz-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #3472FF;
      font-size: 1em;
  }
  
  input[type="text"]::-moz-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #3472FF;
      font-size: 1em;
  }
  
  .submit:hover {
      background-color: #d8d8d8;
  }
  
  .submit {
      background-color: white;
      color: #3472FF;
      font-size: 2em;
      text-transform: uppercase;
      padding: 20px 20px 20px 20px;
      border-radius: 7px;
      border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-screen"&gt;
          &lt;button class="close"&gt;&lt;span class="icon-x"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;form method="post" enctype="multipart/form-data"&gt;
              &lt;div class="form-wrapper"&gt;
                  &lt;h1&gt;Upload Photo&lt;/h1&gt;
                  &lt;div class="box"&gt;
                      &lt;input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple /&gt;
                      &lt;label for="file-1"&gt;
                          &lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"&gt;
                              &lt;path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /&gt; 
                          &lt;/svg&gt; 
                          &lt;span&gt;Choose a file&amp;hellip;&lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="field submit" name="submit" value="submit"&gt;Upload Photo&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>