CSS: 要素を縦軸中心に揃える

table要素で言うところのvertical-align: middle;のように、縦軸上に要素を中心に持ってくる方法。

親要素にdisplay: tableする方法もいいが、tableの挙動になるといろいろと面倒くさいことも。

 

.hoge {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

 

で解決できる。