세로 방향의 중앙 정렬

line-height 한 줄

line-height는 행 사이의 사이즈.
line-height - font-size/2(상하의 행간 높이)
※복수행에 대응할 수 없다
line-height 행 간 정보

.wrapper01
  .box
    p ほげほげほげ

.wrapper01 {
  width: 400px;
  height: 400px;
  background: #ccc;
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    p {
      font-size: 10px;
      line-height: 200px;
    }
  }
}

vertical-align

적용 가능한 것은 인라인 요소와 테이블 셀입니다. 블록 레벨 요소에는 적용할 수 없음

.wrapper02
  .box
    p
     | ほげほげほげ
     br
     | ほげほげほげ

.wrapper02 {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: table;
    p {
      font-size: 10px;
      display: table-cell;
      vertical-align: middle;
    }
  }
}

flex

.wrapper03
  .box
    p
     | ほげほげほげ
     br
     | ほげほげほげ

.wrapper03 {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    p {
      font-size: 10px;
    }
  }
}

코멘트

상하 중앙 정렬은 flex로. flex는 훌륭합니다.