左右中央ぞろえは margin: auto や text-align: center があるけど、
縦方向の上下中央揃えのやり方で躓く人は多いはず。私もいまだに自信が無い。
なので、まとめてみました！
目次
1行テキスト+高さが決まってるならline-height
仕組みとしては、line-heightは行間をつかさどるプロパティなので、
行間を親要素の高さに合わせると、その高さの中央にくるよね、って性質。
行間の高さをもとにしているので、複数行の文字では使えません！
複数行テキスト＋高さが決まってるならvertical-align
親要素に table、子要素を table-cell にして、このボックスをテーブルのセル状態（そのまんま）にしてあげる方法です。
個人的には table-cell ってあんまり好まないんですが、知識として知ってても良いかなーという感じ。
なんで table-cell にしたかというと、縦中央揃えの記述である vertical-align は、inline要素かtable-cell要素にしか効かないから。
複数行テキスト＋高さが決まっていない＋横並びの文字を揃える場合はinline-block;
やたらと用途が限定的ですが、たとえば文字数が違うメニューなんかの位置を縦中央に揃えたいとき。
（表示の関係でコードを閉じた状態にしてるので、必要であれば左上の「HTML」「CSS」タブで見てみてください）
便利なところとして、「一番長い要素の高さに合わせて上下中央になってくれる」っていうのがポイント。
複数行テキスト＋高さが決まってないならpadding
縦揃えで困っている人が求めているのはこれじゃないかもしれないけど、念のため。
padding上下に同じ値を入れてあげれば上下中央になりますよ～ってお話しです。
複数行テキストとは書いたけどもちろん1行テキストでもOK。
疑似要素に便利なposition
これは知った時感動しました。
★マークをpタグの疑似要素として置いてます。
大事なのは
top: 0;
bottom: 0;
margin: auto;の記述。これで上下中央に来てくれます。
ちなみに left: 0; と right: 0; も付け加えると、上下左右中央揃えになるのですごい。
もちろん、座標指定しているので、position要素にしか効かないので注意。
疑似要素に使用できるので、文字の横に何かマークを付けるときとか、タイトルの下にサブタイトルのあしらいとかを付けたいときとかに良いかも。
なんとなく最強なflex
結局 flex 最強みたいなところはありますよね。
親要素に「私の中身は縦中央に揃えるわよ（align-items: center;）」って記述するだけで済むんですもの。
ちなみに「justify-content: center;」って付け加えると左右中央にも揃います。
子要素の幅や高さを問わないので、使いどころは多岐に渡ります。
ただ、比較的新しい記述なので、
ベンダープレフィックスをつけないといけなかったり、IE9以下では動作しなかったり、IE11でもバグが起きたりするようなので過信は禁物です。
堅実に行くなら使わないほうがいいのかも。私は好きです flex 。（韻踏み）
まとめ
縦揃えの方法も色々あるので、場面によって使い分けていきましょう！！
