이것은 개인 출현률이 매우 높아서 가로로 블록의 내용을 상하로 가운데로 배열하는 방법이다.
자주 사용하기 때문에 총결산을 하겠습니다.
기본 HTML 및 CSS 이쪽.
이번에는 네 개의 테두리가 있는 상자를 같은 너비로 나란히 해야 한다.

<div class="hoge">
  <div>ひとつめ</div>
  <div>ふたつめ<br>ふたつめ</div>
  <div>みっつめだよ</div>
  <div>よっつめ</div>
</div>

* {
  box-sizing: border-box;
}

.hoge {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  background-color: #f7f7f7;
  width: 450px;
}

.hoge div {
  border-right: 1px solid #000;
  padding: 10px 20px;
}

table-cell로

자주 쓰시네요.

.hoge {
  display: table;
  table-layout: fixed;
}

.hoge div {
  display: table-cell;
  vertical-align: middle;
}

겉모습은 이런 느낌.

텍스트 한 줄의 네모도 상하 중앙에 잘 붙어 있다.

flexbox로

낡은 OS는 무너지지만 가볍네요

.hoge {
  display: flex;
  align-items: center;
}

.hoge div {
  flex: 1 0 25%; /* 各要素等倍にしてます */
}

align-items 속성은 부모 원소에서 정자 원소의 수직 위치를 가리키며 정렬할 수 있습니다.
이렇게 하면 될 줄 알았는데..

이런 느낌,border는 세로로 채울 수 없어...
border만 잘 안돼.
이럴 때

.hoge {
  display: flex;
  align-items: stretch;
}

.hoge div {
  display: flex;
  align-items: center;
  flex: 1 0 25%; /* 各要素等倍にしてます */
}

... 면

border 뻗었어!!!!!
부모 요소의 align-items를stritch로 확장하기 (용기를 가득 채우기)
※ 기본값은 stretch이므로 아무것도 추가하지 않아도 OK
자 요소에 flex를 더하고 Align-items를 더하면 중간에 가깝다.
div의 내용은 교과서일 뿐이잖아!아무것도 안 둘러쌌잖아!불가사의하다
그러나 이런 상황에서 flex의 직접 서브요소 텍스트는 flex 프로젝트에 의해 포장되었다.

총결산

어려웠지만 즐거웠어요