CSS 글자 세로 중앙에 정열하는 방법

글자를 세로 중앙에 정렬하는 방법으로는 line-height, padding 등의 다양한 방법이 있지만 앞서 두 가지 방법에는 각기 단점이 있기에 지정된 태그 안에 여백과 줄 수와 관계없이 중앙 정열이 가능한 방법으로 vertical-align: middle 사용합니다.

<div style="line-height:100px;>line-height</div>

line-height를 사용하는 경우 높이를 지정해줄 경우 그 값만큼의 중앙으로 자동 정열 되기 때문에 간단하면서 유용할 수 있습니다.

<div style="line-height:100px;>line-height<line-height<line-height<line-height<line-height<line-height</div>

한 줄 이상이 되어버리면 각줄에 지정한 높이가 추가되기 때문에 100px로 설정할 경우에 모든 줄에 100px를 가지게 되어 공백이 차지하는 공간이 많아짐으로 블로그의 디자인이나 가독성을 떨어 트릴 수 있습니다.

<div style="padding: 40px 10px;>padding</div>

아래위로 같은 값의 여백을 부여하여 중앙에 정열이 가능합니다. 상하 여백이 같기 때문에 수직 가운데 정열이 가능하고 값을 다르게 하여 원하는 위치에 배치가 가능합니다

<div style="padding: 40px 10px;>padding;>padding;>padding;>padding;>padding;>padding;>padding</div>

패딩 역시 두 줄이 되면 줄이 늘어난 만큼 높이가 변경됩니다.

<div style="padding: 40px 10px;>padding;>padding;>padding;>padding;>padding;>padding;>padding</div>

높이가 지정되지 않는 경우 내용 전체가 여백을 가짐으로 중앙 정열에는 문제가 되지 않지만 태그 높이가 정해진 경우에는 높이에 맞는 여백 값을 변경해주지 중앙 정열이 되지 않게 됩니다.

<div style="display: table-cell; height: 100px; vertical-align: middle;>display: table-cell; height: 100px; vertical-align: middle</div>

display: table-cell; vertical-align: middle;

vertical-align: middle를 사용하기 위해서는 태그에 display: table-cell라는 특정 속성이 부과되어야지만 가능합니다.

<div style="display: table-cell; height: 100px; vertical-align: middle;>display: table-cell; height: 100px; vertical-align: middle>display: table-cell; height: 100px; vertical-align: middle>display: table-cell; height: 100px; vertical-align: middle>display: table-cell; height: 100px; vertical-align: middle>display: table-cell; height: 100px; vertical-align: middle</div>

글자 수가 많아져 여러 줄로 늘어나더라도 상하 여백이 자동 조절되어 지정된 높이의 중앙에 위치하게 됩니다.