[CSS] LESS 활용한 박스를 웹 브라우저 창 가운데에 배치하는 방법

LESS 로 다음과 같은 코드가 입력되있다고 하자

@form_width: 600px;
@form_height: 400px;

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @form_width;
    min-height: @form_height;
    /* 이 부분 */
    margin-top: -1 * @form_height / 2;
    margin-left: -1 * @form_width / 2;
}

 

원리는 간단하다.

해당 박스(#content)의 기준 점이 왼쪽 상단인데, position과 top, left 로 인해 이것이 화면의 중앙에 위치하게 된다.

이것을 가운데에 배치된 것처럼 만드려면 해당 박스의 가로 폭의 반만큼 왼쪽으로, 세로 폭의 반만큼 위쪽으로 옮기면 된다.

margin 값에 음수를 넣어서 쉽게 활용이 가능하다.