テキストや画像など、要素の中央に寄せたいときはこんな方法でやる

table-cellを使う

1. <div class=”class”>
2.  テキスト
3. </div>

1. .class {
2.  display: table-cell;
3.  vertical-align: middle;
4.  height: 100px;
5. }

自分ではあまり使わないかも

テキストが1行の時

1. .class {
2. line-height: 100px;
3. }

これで高さ100pxの中央に配置される。

flexを使う

1. .class {
2.  display: -webkit-flex;
3.  display: flex;
4.  -webkit-align-items: center;
5.  align-items: center;
6. }

よく使う、ブラウザの対応に注意する必要がある。
Can i use でflexをチェック