flex box align-items 적용안됨

login form을 만들고 페이지 가운데에 위치하게 하고 싶어서
flex-box를 사용했는데 align-items가 적용이 되지 않았다..

  <section class ="longin_main">
    <form class ="login">
    </form>
  </section>

.login_main {
    display: flex;
    justify-content: center;
    align-items: center; (적용 안됨)
}

⚠️ 문제점
개발자도구를 통해 확인해보니 login_main이 페이지 세로 전체를 덮고 있지 않음.

💡 해결방법
form을 감싸고 있는 login_main이 페이지 전체를 덮고있게 변경해준다.

.login_main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; (추가)
}

👉🏻 login_main에 높이를 100vh로 설정해주었더니 align-iems: center; 가 적용되었다 ❗️