How to center a form with foundation?

Question

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?

<section class="section_light">
    <div class="row">
        <div class="four columns">
          <div class="signup-panel">
            <h4 class="welcome">Login</h4>
            <form data-abide method="post" action="connection" id="form_login">
              <div class="row collapse">
                <div class="small-12  columns">
                  <input name="username" type="text" placeholder="Username" required>
                </div>
              </div>
              <div class="row collapse">
                <div class="small-12 columns ">
                  <input name="password" type="password" placeholder="Password" required>
                </div>
            </div>
            <input type="submit" class="round button" value="Login"/>
        </form>
      </div>
    </div>
   </div>
</section>

I've been playing around with the html quite a bit without any success.

---

EDIT: phortx's solution

Answer 1

Assuming that you're working with Foundation 5:

I'm pretty sure, that <div class="four columns"> won't work.

Try this instead: <div class="small-4 small-centered columns">