CSS で上下 margin のパーセント (%)を使う場合の注意

なるほど。そういうことか。はまった。

margin の % 指定では、親要素の幅が基準となります。margin-top や margin-bottom の計算も、親要素の高さではなく幅が基準です。高さを基準にするなら calc、position、vertical-align、javascript など別の手段を検討する必要があります。

以下がとても参考になった。

CSS で上下 margin のパーセント (%) 指定が上手く行かない原因 | かきしちカンパニー Web Magazine