169일차 - div태그 글씨 세로 중앙 정렬

line-height (이전)

내가 이전 부터 사용하던 방법이다.
vertical-align: middle 이 아무리 해도 적용이 안되어서 사용했었다.
사용 방법은 아래와 같다.
HTML

<div class='box'>
  hello
</div>

CSS

.box {
  height: 100px;
  line-height: 100px;
}

box의 크기인 height와 line-height의 크기를 같게 하는 것이다.

(잘 보이게 하기 위해 사진은 background-color: gray를 주었다)

하지만 이 방법에는 문제가 존재한다.

사진처럼 글이 화면을 넘어가면 line-height속성 때문에 지정한 만큼 줄간격이 벌어지는 것이다.
그래서 vertical-align: middle을 적용할 수 있는 방법을 다시 서칭했다.

display: table (현재)

내가 서칭해본 방법중에서 가장 간단한 방법이다.
HTML

<div class='parent'>
  <div class='child'>
    hello<br/>
    world
  </div>
</div>

CSS

.parent {
  display: table;
  width: 100%;
  height: 100px;
  background-color: gray;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

우선 부모 div를 생성해서 display: table를 적용시킨다.
그리고 자식 div를 생성해서 display: table과 vertical-align: middle을 적용 시키는 것이다.
이 방식을 사용하면 HTML에 작성한 것 같이 띄어쓰기를 해도 세로 중앙 정렬이 적용 된다.