DIV 상하 좌우 중앙 정렬하는 CSS

html 퍼블리싱을 하다 보면, 중앙 정렬을 하는 경우가 생각보다 많습니다. 물론 요즘에는 flex를 쓰기도 하지만, 좀 더 고전적인 방법을 적어보려고 합니다. 고전적인 방법을 사용하면, 아직 최신 웹브라우저로 업데이트하지 않은 분들의 화면에도 제대로 보일 수 있습니다. 물론! css polyfill 을 사용하는 방법이 있기도 합니다. 물론 서울에서 부산까지 가는 길은 여러 길이 있지만, 오늘은 또 한 길을 소개해 볼까 합니다.

div 를 가운데 정렬하려면?

 

어렵게 생각할 것이 아니라, 객체를 싸고 있는 div의 display를 table로 지정하는 방법입니다. div를 테이블처럼 처리하는 방법입니다.

그리고, 그 안에 들어간 div는 display를 table-cell로 지정하면, text-align 뿐만 아니라, vertical-align이 적용됩니다.

 

아래 코드와 실제 예제를 임베드했습니다. 확인해 보세요.

 

감사합니다.

 

See the Pen Untitled by ByteNecleus (@bytenecleus) on CodePen.