[번역] THE COMPLETE GUIDE TO CENTERING A DIV

이글의 원문은 'THE COMPLETE GUIDE TO CENTERING A DIV (http://www.tipue.com/blog/center-a-div/)' 이며 단순히 필자의 개인적인 Study만을 위한 목적으로 번역한 내용임을 밝힙니다.

모든 신입 개발자들은 DIV 가운데 정렬이 예상만큼 쉽게 되지 않는 다는 걸 알게 된다.

DIV 내부에 있는 것들은 text-align 속상을 center로 주는 것만으로도 충분하다. 그러나  몇몇의 경우에는 곤란한 경우가 있다. (a bit sticky.를 뭐로 해석을 해야할지 고민했네... 이게 맞나?)

수직으로의 가운데 정렬은 CSS 나라에서 고통스런 최후를 맞을 수도 있을 것이다.

이 글의 목적은 몇몇 css 트릭을 이용하여 어떤 div라도 수직,수평으로 또는 둘다 페이지 또는 div 안에서 가운데 정렬을 할수 있게 하는 것이다.

1. 페이지에서 기본적인 DIV의 가운데 정렬하는 방법

- 거의 모든 브라우저에서 정상적으로 동작한다.

CSS

.center-div
{
    margin : 0 auto;
    width: 100px;
}

example

margin에서 auto값은 해당 element의 좌우 margin 값을 페이지 내부의 공간안에서 적절한 값을 지정해 준다. 기억할 것은 div 가운데 정렬은 width 값이 있어야 한다는 것이다.

2. DIV 내부의 DIV를 가운데 정렬하는 오래된 방법 

- 거의 모든 브라우저에서 작동합니다.

CSS

.outer-div
{
    padding : 30px;
}
.inner-div
{
    margin: 0 auto;
    width: 100px;
}

example

margin auto 트릭이 또 등장한다. 내부 div는 역시나 width값을 가져야 한다.

3. DIV 내부의 DIV를 Inline-Block 속성을 부여하여 가운데 정렬하는 방법

- 이 방법으로 내부 div는 width 값 설정이 필요하지 않는다. IE 포함하는 모든 최신 브라우저에서는 동작한다.

CSS

.outer-div
{
     padding: 30px;
     text-align: center;
}
.inner-div
{
     display: inline-block;
     padding: 50px;
}

example

text-align 속성은 오직 inline element에서만 동작한다. inline-block 속성을 지정하게 되면 해당 element(div)는 inline block 처럼 보여지게(원문에서는 displays라고 표현했지만 랜더링이 더 어울릴 것 같기는 하다.)된다. 그래서 inline block에 대해서만 가운데 정렬이 가능한 text-align 속성을 이용해서 외부 div가 내부 div를 가운데 정렬할 수 있게 한다.

4. DIV 내부의 DIV를 수직,수평 모두 가운데 정렬하기

- margin auto 트릭을 수직,수평 정렬하는데 모두 사용한다. 대부분의 브라우져에서 정상적으로 동작합니다.

 

CSS

.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: auto;
     width: 100px;
     height: 100px;  
}

example

내부 div는 width, height 속성이 모두 있어야 한다. 하지만 외부 div가 고정 높이를 가지고 있다면 동작하지 않는다.

5. 페이지 하단에 DIV 가운데 정렬 시키기

 - 이 방법은 margin auto 트릭과 외부 div의 절대 위치(absolute-positioned) 속성이 사용된다. 모든 최신 브라우저에서 동작한다.

 

CSS

.outer-div
{
     position: absolute;
     bottom: 70px;
     width: 100%;
}
.inner-div
{
     margin: 0 auto;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

example

내부 div는 width 속성을 가져야 하며, 외부 div의 bottom 속성이 설정되어야 한다.

6. 페이지 전체에서 수직,수평 가운데 정렬하는 방법

 - 이 방법 역시 margin auto 트릭과 절대 위치(absolute-positoined) 속성이 사용된다. 모든 최신 브라우저에서 동작한다. (원문에서는 5,6번이 설명이 같다. 근데 6번은 외부 div가 사용되지 않는다.)

 

CSS

.center-div
{
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

example

div는 width, height 속성을 가져야 한다.