최상위 태그에서 가운데 정렬을 하고 싶다면?

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

export default function OauthLogin() {
  return (
    <>
      <main css={topWrapperCSS}>
        <section>
          <h2>로그인 페이지입니다.</h2>
        </section>
        <section>
          <div css={buttonWrapperCSS}>
            <button>네이버로 로그인</button>
            <button>카카오톡으로 로그인</button>
          </div>
        </section>
      </main>
    </>
  );
}
const topWrapperCSS = css`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

height를 100vh로 지정하면 viewport를 기준으로 작동하기 때문에 가운데에 올 수있다!

height : 100% 와는 다르다! 100%는 상위태그 높이 기준으로 보이기 때문에 달라질 수 있다