CSS 수직 가운데 정렬 (테이블 없이!) Vertical Centering with CSS

이 방법은 테이블처럼 만들어서 테이블의 vertical-align 속성을 사용할 수 있도록

를 몇 개 세팅한다. (테이블의 vertical-align 속성은 다른 요소들에서는 굉장히 다르게 작동한다.)

 

일러 두기: 아마 “테이블을 사용하려던 건 아닌데” 하고 생각할지 모르겠다. 테이블을 사용할 때 주된 문제는 마크업을 시멘틱하게 유지해야 한다는 것이다. 테이블 코드를 짜지만 그게 사실 진짜 표는 아닌 경우, 테이블로 코딩하지 말아야 한다. (실제 표인 경우엔 테이블을 사용해도 아무 문제 없다.)

를 테이블로 생각하게 만들어서 생기는 유일한 문제는 브라우저가 일관되게 작동하지 못하게 된다는 점이다. 이건 미친 짓은 아니다. a에 display:block;을 주거나

에 display:inline;을 주는 것과 비슷한 것뿐이다.  9

 

[역자 주 - 한 줄에 여러 요소를 넣어야 할 때는 display: table 대신 display: inline-table을 사용할 수도 있다.]

 

 

#wrapper {display:table; height:100px; border:1px solid red; width:400px; text-align:center;}

#cell {display:table-cell; vertical-align:middle; border:1px solid blue;}

 

 

 

Content goes here

 

 

장점

높이가 변해도 상관없다. (CSS에 높이를 지정하지 않아도 된다.)

wrapper에 공간이 없어도 내용이 잘리지 않는다.

 

단점

인터넷 익스플로러에서 작동하지 않는다. (심지어 IE8 베타에서도.)

태그 단계가 깊어진다. (그렇게 나쁜 건 아니다. 이건 주관적인 부분이다.)

 

방법2:

 이 방법은 position absolute를 사용한다. top을 50%로 설정하고 margin-top을 콘텐츠의 절반 높이만큼 음수로 설정한다. 이것은 요소의 높이를 CSS에서 지정해야 한다는 걸 의미한다.

 

높이를 지정해 두기 때문에, 내용이 넘치면 div 밖으로 튀어나간다. 대신에 스크롤바가 생기도록 콘텐츠 div에 overflow:auto;를 주고 싶을 것이다.

 

 

#content {position:absolute; top:50%; border:1px solid red; height:240px; margin-top:-120px; /* negative half of the height */}

 

 

  Content Here    

 

 

장점

모든 브라우저에서 작동한다.

태그가 깊이 들어가지 않는다.

 

단점

충분한 공간이 없으면 내용이 잘린다. (div가 body 밑에 있고, 사용자가 브라우저 창을 줄이면, 스크롤바가 나타나지 않는다.)