세로 방향의 중앙 정렬

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;
    }
  }
}

코멘트