index.html

<!DOCTYPE html>
<html>
<head>
  <title>로그인</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <div class="login-form">
    <form>
      <input type="text" name="email" class="text-field" placeholder="아이디"><br>
      <input type="password" name="password" class="text-field" placeholder="비밀번호"><br>
      <input type="submit" value="로그인" class="submit-btn">
    </form>

    <div class="links">
      <a href="#">비밀번호를 잊어버리셨나요?</a>
    </div>
  </div>
</body>
</html>

css/styles.css

* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

body {
  margin: 0;
  background-color: #1BBC9B;
}

.login-form {
    margin:auto;
    padding:20px;
    width:300px;
    background-color:#EEEFF1;
    border-radius:5px;
}

.text-field {
    border:none;
    border-radius:5px;
    width:260px;
    margin-bottom:10px;
    padding:10px;
  font-size: 14px;
}

.submit-btn {
    color:white;
    width:260px;
    border:none;
    border-radius:5px;
    background-color: #1BBC9B;
  font-size: 14px;
    margin-bottom:30px;
    padding:10px;   
}

.links {
        text-decoration:None;
        text-align:center;
}

.links a {
    text-decoration:none;
    color:#9B9B9B;
  font-size: 12px;
}

좌우는 정렬이 되는데 위아래는 왜 가운데 정렬이 안되는걸까요??