CSS 가운데 정렬

방법-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>

방법 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>