CSS 내용, footer 수직정렬

1. 목표
‘To-Do List 웹사이트’의 footer contents 수직 정렬.

 

2. 방법

footer 수직정렬 준비물 : div 2개 그리고 display:flex; + α
수직정렬 방법이 여러 가지 있지만 가장 쉬운방법은 flex를 이용하는 것이다.
이 방법은 footer에 한정된 방법이 아니라 css의 다른 콘텐츠에서도 활용할 수 있다. 내 경우에는 footer를 대상으로 하기에 footer영역에서만 사용했다.
div를 두 개 생성하고 첫 번째 div(바깥쪽 div) 안의 두 번째 div(안쪽 div)를 중앙정렬 하고, 안쪽에 있는 div를 또 중앙정렬하면 파워 중앙정렬이 된다.

 

1) display:flex 와 안쪽 div에 margin:auto;

즉, 겉에 있는 첫 번째 div에 flex를 걸고 안쪽에 있는 div는 margin:auto를 부여해 div끼리 서로 밀고 당기게해서 중앙정렬 할 수 있다. span으로 한 번더 margin:auto 부여하면 완벽.

See the Pen css footer, 내용 수직정렬1: margin:auto; by hi-iamim2 (@hi-iamim2) on CodePen.

 

 

2) display:flex 와 안쪽, 바깥쪽 div에 justify-content와 align-items: center;

개인적으로는 justufy-content와 align-items를 사용하는 방법이 더 편한 것 같다.

See the Pen css footer, 내용 수직정렬2: justify-content와 align-items: center by hi-iamim2 (@hi-iamim2) on CodePen.

 

 

 

 

두 가지 방법을 써 놨지만, 사실 딱 네 줄만 기억하면 된다. 머리싸매고 엄청고민했는데 엄청심플하다.

display:flex;
flex-direction: column;
justify-content: center;
align-items: center;

 

 

 

참고자료
구글링, 스파르타 코딩클럽