上下中央寄せ
インライン要素、インラインブロック要素の場合
table-cell を利用する。
コンテナ側に display: table, display: table-row が必要であることに注意。display: table-cell のみでは動かない。
code:css
#outer {
display: table;
}
#container {
display: table-row;
}
#content {
display: table-cell;
vertical-align: middle;
}
ブロック要素の場合
transform を使う。
code:css
#content {
position: absolute;
width: 120px;
height: 90px;
background-color: yellow;
top: 50%; /* 起点を中心に */
transform: translate(0, -50%); /* 自分の縦サイズの半分だけ上にずらす */
}