TIL - 20.12.09 (CSS 가운데 정렬)

예니·2020년 12월 9일
0

TIL

목록 보기
16/25

🗓 week 0 : 웹사이트 제작

📆 제작 기간 : 20.12.07 ~ 09

🔨 기술, 언어 : Flask, JWT, jinja2, python, JS, html, css


프로젝트 정리글은 다 끝나고 쓰고, TIL은 오늘 만들면서 기억해둘만한 것들을 기록하는 용도로 사용할 예정이다.

📌 CSS 세로 가운데 정렬

CSS에서 가장 어렵게 느껴지는 세로 가운데 정렬.......
항상 헤맸는데 팀원분이 완전 명쾌하게 알려주셨고 너무 충격받아서 이건 꼭 정리해야한다고 느꼈다.
지금 새벽 2시고 정말 피곤하지만 이건 꼭 적고 자야할 것 같아서 TIL 쓰게 됐다.


  • 부모 태그
display: flex;
justify-content: center;
align-items: center;
  • 자식 태그
display: flex;
align-items: center;

위와 같이 추가해주면 마법같이 세로 가운데 정렬이 된다😂
flex 사용하는 방법은 구글링해서 자주 봤었는데 항상 이해가 안갔다.
근데 팀원분 설명에 단번에 이해했다. 감사합니다 정말ㅠㅠ

  • justify-content: center; : 가로 균등하게 만들어줌
  • align-items: center; : 세로 가운데 정렬

0개의 댓글