CSS div 내의 수직 수평 중앙 정렬

div 로 무엇을 만들 때 수직 수평 중앙 정렬이 안 되어서 늘 테이블을 그리워 했던 기억들을 누구나 가지고 있었을 것입니다.

display:flex 를 사용하여 쉽게 정렬할 수 있습니다. div 안의 내용이 그 무엇이라도 상관이 없습니다.

<style>
.my { display:flex; justify-content:center; align-items:center ;   }
</style>
<div class=my style=width:600px;height:600px;background-color:yellow>
그누보드
</div>

justify-content : 테이블에서 align 처럼
flex-start : 좌측
flex-end : 우측
center : 중앙

align-items : 테이블에서 valign 처럼
flex-start : 상단
flex-end : 하단
center : 중앙