title: How to center a form with foundation?
body: <p>As you can see in the image below, the form is shifted to the left. I would like it to be centered (=middle of screen) within the row. How do I do this correctly with foundation?</p>
  
  <p><a href="https://i.stack.imgur.com/BrRyk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BrRyk.png" alt="center"></a></p>
  
  <pre><code>&lt;section class="section_light"&gt;
      &lt;div class="row"&gt;
          &lt;div class="four columns"&gt;
            &lt;div class="signup-panel"&gt;
              &lt;h4 class="welcome"&gt;Login&lt;/h4&gt;
              &lt;form data-abide method="post" action="connection" id="form_login"&gt;
                &lt;div class="row collapse"&gt;
                  &lt;div class="small-12  columns"&gt;
                    &lt;input name="username" type="text" placeholder="Username" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row collapse"&gt;
                  &lt;div class="small-12 columns "&gt;
                    &lt;input name="password" type="password" placeholder="Password" required&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;input type="submit" class="round button" value="Login"/&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I've been playing around with the <code>html</code> quite a bit without any success.</p>
  
  <hr>
  
  <p>EDIT: phortx's solution</p>
  
  <p><a href="https://i.stack.imgur.com/P9Fu3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P9Fu3.png" alt="enter image description here"></a></p>