수평 가운데 정렬

개요

현대 웹사이트에서 많이 사용되는 또 다른 레이아웃은 아래가 있습니다.

그냥 기본 아니냐구요? 아래는 어떠한가요?

컨텐츠는 좌측 정렬되어있지만 이를 둘러싸고 있는 흰색의 컨테이너는 가운데 정렬되어 있습니다.

웹 브라우저의 크기는 고정되어있지 않고 사용자가 늘였다 줄였다 할 수 있음에 반해, 이에 대응하여 크기마다 모두 디자인할 수는 없기에, 기본 컨텐츠를 보여줄 컨테이너의 크기는 고정하고 남은 공간은 여백으로 쓰는 보편적인 웹 디자인 방법 중 하나죠.

보통 컨테이너의 크기는 800px, 900px, 1000px 정도를 사용합니다. 그 이상을 사용하기도 하지만, 보통 1200px은 잘 넘지 않습니다. 이를 구현하는 방법에는 어떤 것들이 있을까요?

방법 1 - left와 margin-left

absolute position의 left와 margin-left 속성을 잘 이용하면 이를 구현할 수 있습니다. left를 일단 50%로 주고, width의 절반 만큼 더 왼쪽으로 이동시키면 됩니다. HTML 요소의 좌표계는 중앙이 아닌 좌상단이기 때문입니다.

margin-left 속성은 신기하게도 음수 값을 주면 그 값만큼 요소를 왼쪽으로 이동시킵니다. 이 특징을 이용하여 left: 50%, margin-left: -{width / 2} 의 값을 주면 가운데 정렬이 된 것처럼 보입니다.

단 width를 동적으로 가져와 절반 만큼 사용하는 방법은 일반적으로 존재하지 않습니다. 직접 width와 padding을 계산해서 적어주어야 합니다. 또 absolute 요소는 부모의 height 계산에 반영되지 않으므로 부모의 height를 고정해서 적어주어야 할 수도 있습니다.

예제

<style>
    .container-a {
        position: absolute;
        left: 50%;
        margin-left: -265px;
        width: 500px;
        background: white;
        padding: 15px;
    }
</style>
<div style="height: 300px">
	<div class="container-a">
        <h4 style="margin:0; padding: 10px 0; font-size: 26px">Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

방법 2 - margin: auto

위 방법은 복잡하고 그리 좋은 방법은 아닙니다. 일반적으로 위와 같은 레이아웃을 배치할 때 margin 속성의 auto 값을 주로 사용합니다. margin-left와 margin-right가 모두 auto 라면, 브라우저는 해당 요소를 수평 가운데 정렬시킵니다.

margin 속성의 단축 사용법 중에 margin: 10px 20px 처럼 사용하면 상하는 10px, 좌우는 20px로 적용한다고 하였습니다. 비슷하게 margin: 0 auto 처럼 적어주면 상하는 0px, 좌우는 auto로 설정이 됩니다. 이는 다시말해 상하 여백은 사용하지 않고 가운데 정렬만 사용한다는 의미입니다.

예제

<style>
    .container-b {
        margin: 0 auto;
        width: 500px;
        background: white;
        padding: 15px;
    }
</style>
<div>
	<div class="container-b">
        <h4 style="margin:0; padding: 10px 0; font-size: 26px">Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

보충

left: 50%과 margin-left: -<값>은 메인 컨테이너를 가운데 정렬하는데 잘 사용되지는 않지만, absolute인 요소를 가운데 배치할 때는 종종 사용합니다. 대표적인 예시로는 툴팁이 있죠.

이 페이지 수정 제안하기