[CSS] DIV안에 요소 세로 중앙 정렬

안녕하세요.?

오늘은 DIV안에 요소를 세로 중앙으로 정렬하는 방법에 대해서 알아 보도록 하겠습니다.

기본적으로 DIV안에 요소를 새로로 정렬하기 위해서는 아래의 코드 처럼 사용합니다.

핵심은 DIV를  display: table; 속성을 이용해 테이블로 변경하고

SPAN을 display: table-cell; 속성을 이용해서 Cell로 변경을 하면 됩니다.

/** DIV안의 요소는 주로 SPAN을 사용함.**/ div{ height:50px; width : 100%; border: 1px solid black; border-radius:6px; font-size: 18px; text-align: right; display: table; padding-right: 10px; } div span { display: table-cell; text-align: left; vertical-align: middle; text-align: right; } <DIV> <SPAN>중앙정렬</SPAN> </DIV>