【CSS】テキストや画像の縦方向の位置を指定する「vertical-align」が効かない時の対処法

ある要素内のテキストや画像などを縦方向の位置を指定するときに便利な「vertical-align」プロパティですが、時折聞かないことがあるそう。
私もこの現象に遭遇したので、備忘録としてまとめ。

まず、書いたコードはこちら。

<div id="outer">
    <div id="inner"></div>
</div>

#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    vertical-align: middle;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
}

で、上記で何が問題かというと、そもそも「vertical-align」プロパティが適用されるのは、インライン要素とテーブルセルのみだったことです。
したがって、上記でいうと #outer に、「display: table-cell;」を追加したところ、あっさりと #inner の要素が #outer 要素に対して縦方向の中央揃えになりました。

分からないとドツボにハマりそうですが、案外原因ってこんな些細なことだったりするんですよね…。
私は分からないと判明してすぐに調べたので、長時間調べることもなく原因が判明しました。

なお、中央揃えする方法なら、こちらの方法もあります。

【CSS】DIV要素を上下左右で中央揃えする方法（IE、Safari対応）
https://cpoint-lab.co.jp/【css】div要素を上下左右で中央揃えする方法（ie、safari/

こちらは、親要素に「position: relative」を、子要素に「position: absolute」を指定して、さらに子要素に「top: 50%」「transform: translate(0, -50%)」を指定する方法です。
具体的には下記のとおりです。

#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    position: relative;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

上記のコードでも、vertical-align: center を指定した時と同じ結果になります。
なにかしらのCSSプロパティの制約がなければ、お好きな方をお使いいただければいいと思います。

ということで、要素の縦方向の位置を指定する方法でした。
他にも、margin を指定するなど、色々方法はあると思いますので、自分のコードにあった方法をお試しください。