[CSS] 화면 정중앙에 요소 배치(반응형)

팀프로젝트를 진행하면서 화면단의 통일성을 위해 한 사람이 웹 디자인-퍼블리싱을 맡기로 했다.

그리고 그게 나다.

 

오늘부터 프로젝트 진행 중 막혔던 부분과 해결한 방법을 위주로 포스팅을 하려고 한다.

 

로그인 화면 - 화면 정중앙에 요소 배치하기

사진과 같이 중앙에 로그인 폼을 위치시키고 싶었다.

<!-- HTML 코드 -->

<main class="form-signin"> <!-- 클래스 부여 -->
  <form action="/login" method="post" >
    <input  type="text" name="uid" placeholder="Your ID" required autofocus">
    <input type="password" name="upw" placeholder="Password" required><br>
    <button type="submit">Sign in</button>
  </form>
</main>

/* CSS 코드 */

.form-signin{
    max-width: 390px;
    position: absolute;
    width: 100%;
    padding: 10px;
    top: 50%; /* 전체 높이 위에서부터 절반 */
    left: 50%; /* 전체 넓이 왼쪽에서부터 절반 */
    transform: translate(-50%, -50%); /* 해당 요소의 높이, 넓이의 절반만큼 돌아가기 */
  }

위와같이 html 를 구성하고 가장 바깥쪽인 main 태그에 'form-singin' 클래스를 걸었다.

form-signin 의 속성으로는

 

    position: absolute // 가장 가까운 조상 요소를 기준으로 함
    top: 50% // 높이의 절반
    left: 50% // 넓이의 절반

 

여기까지 하면 화면의 정중앙을 가리킨다.

정중앙으로부터 해당 요소 (main 태그)를 그리게 되면 다음과 같다.

    transform: translate(-50%, -50%) // 자신의 넓이, 높이의 절반만큼 다시 빼준다.

이렇게 해줘야 정중앙에 요소를 위치시킬 수 있다. 

고정된 값이 아닌 %로 값을 넣어주었기 때문에 화면 사이즈에 상관 없이 반응형으로 그려지기 때문에

모바일 환경이나 태블릿 환경에서도 동일하게 적용된다.