[CSS] css를 이용한 가로 중앙, 세로 중앙 정렬

* IE8 이상에서만 정상적으로 동작하는 방법입니다. 이전 버전 IE에서는 CSS HACK을 써야하니... 

전 그냥 지원안합니다 -_-;; I hate IE.

1. 가로 정렬.

가로정렬은 쉽습니다.

CSS

#wrap {
    width: 150px;
    height: 150px;
    background-color: yellow;
}
#horizon {
    width: 50px;
    height: 50px;
    background-color: green;
    margin: 0 auto;
}

HTML

위와 같이 margin: 0 auto; 만 주면 되거든요.

물론 #horizon 에 display:inline-block을 주어 인라인 요소로 만든후 #wrap에 text-align:center 형태로 해도 되지만 margin이 가장 간단한듯 싶군요.

2. 세로정렬

세로 정렬이 조금 힘들어 집니다.

일단 기본적인 방법을 봅시다.

CSS

- 첫번째 방법

#wrap {
    width: 150px;
    height: 150px;
    background-color: yellow;
    position: relative;
}
#vertical {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    top:50%;
    margin-top: -25px;
}

- 두번째 방법

#wrap {
    width: 150px;
    height: 150px;
    background-color: yellow;
    display: table-cell;
    vertical-align: middle;
}
#vertical{
    width: 50px;
    height: 50px;
    background-color: green;
    display: inline-block;
}

HTML

첫번째는 안쪽 초록색 블록의 크기를 정확히 알고 있을 때 사용하는 방법입니다.

시작 지점을 50% 내린다음에, 블록크기 절반만큼 위로 마이너스 마진을 준 것이죠.

크기를 모를때는 사용할 수 없습니다.

그래서 크기와 상관없이 무조건 세로 중앙정렬을 사용하는 방법으로는 두번째 방법을 사용하셔야 합니다.

하지만... 여기서 또 문제가 발생하는 부분이 있는데요?

float:left, float:right 등으로 플로팅 된 박스 모델의 경우 세로정렬이 또 제대로 동작을 하지 않는다는 겁니다.

미치겠네요.

그래도 방법은 있습니다. 

첫번째 방법처럼 position 속성을 조정함으로써 일일이 다 컨트롤해 주던가, table 구조로 만들어 버리면 됩니다.

다음은 그 대망의 완성본 입니다.

3. floating Div 에서 가로세로 중앙 정렬

CSS

/*왼쪽상자*/
#floating_v_align {    
    width: 150px;
    height: 150px;    
    background-color: yellow;
    float: left;
    display: table;
}
#floating_v_align #cell {
    display: table-cell;
    vertical-align: middle;
}
#block {
    width: 50px;
    height: 50px;
    background-color: green;
    margin: 0 auto;
}

/*오른쪽상자*/
#floating_wrap {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;    
    position: relative;
}
#block2 {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    left: 50%;
}

HTML

참고 : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html