css 텍스트 중앙정렬

CSS 텍스트 중앙(수직,수평) 정렬

보통 텍스트 중앙 정렬 하는 방법으로 text-align:center; 또는 vertical-align:middle; 방법이 있는데,

가변적으로 쓸때는 잘 안될때도 있다.

특히나 가로 수직 정렬은 텍스트가 2줄로 떨어질 수 있는 상황이 있을 수 있어서 더더욱 어려운데

마침 구글링 하다보니 좋은 방법이 있었다!

여기서 관건은 transform: translate(0, -50%) / transform: translate(-50%, -50%) 이 부분이다!

아쉬운 부분은 tranform 을 써야해서 ie10부터 가능하다.

그래도 모바일에선 유용하게 쓸 수 있으니 알아두면 좋을 듯하다.