div 세로 정렬

div  의 세로 정렬은 이렇게도 할수있다.

#parent_div{display: table;}

#child_div{display: table-cell;vertical-align: middle;}

ie7이하는 안 먹는다... 아 귀찮어..

그럼 ie 무시.

몰라 ie..

때되면 ie 가 따라오겠지.

어차피 모바일에서 ie 7쓸일은 없다.

단점은 부모 div 의 넓이는 자식 div 넓이의 총합 이상 잡히지 않는다.

예를 들어

#root_div{width: 480px;}

#parent_div{display: table;background: 100%;}

#child_div{display: table-cell;vertical-align: middle;width:200px;}

요런식일때 부모 div 는 꼭 200px 만 잡고 있더라.

다른게 꼬인지도 모르겠으나, 일단 지금까지 해본봐론~그르타.

그러하니..

자식 리스트,혹은 div에 배경을 주고 가로 전체 100% 하고싶은 경우

배경을 루트에 주던지 혹은 부모를 감싸는 다른 div 를 만들던지 해야하는 경우가 생긴다.

게다가 float 을 줘버리면 저마저도 안된다.

좀 귀찮다 이런 부분은.

또 다른 방법은

이게 좀 쓸만하다.

parent_div{ position: relative; }

child_div { position : absolute; top: 50%; margin-top: - 세로중앙 정렬할 객체 높이의 반.}

child_div 의 높이가 20px 이라면 margin-top : -10px ; 주면 된다.

얘는 좀  잘 먹는 듯하다. 딱히 다른 상황에서 다르게 표현되진 않은듯. 현재까진.

그리고 자주 쓰는,

난 float 이나 position 자체를 그닥 안 좋아해서

div {height: 40px; line-height: 40px;}

요런 식으로 자주 한다.

헌데.. 얘는 텍스트 크기를 기준으로 잡는게 아니라 line-height 를 기준으로 잡기때문에

(보통 라인높이가 40이면 텍스트 높이는 뭐 한 36되겠지) 전체적으로 중앙에서 조금 올라간 기분이 든다(라인 높이 - 텍스트 높이 요정도)

포지션 쓰는 방법이 현재로서는 제일 무난하다.