CSS flexで縦位置の中央配置する

flexにalign-items: center;と書くと縦の真ん中に配置できます。
テキストが2行でも3行でも問題なく表示できます。

よくある、画像とテキストを左右に分けて、テキストを縦の中央に配置したい場合に使えます。



サンプル

See the Pen CSS Sample [align-items: center;] by takapen (@takapen) on CodePen.

html

title
text






title
text
text

css

* {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
.box {
  margin: 10px;
  display: flex;
  align-items: center;
}
.img {
  width: 5em;
  height: 5em;
  margin-right: 10px;
  background: #ccc;
}