onearc_html

初学者の頃に、上下左右の中央揃えをしたくて調べるとよく遭遇するCSSに

position: abosolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

というものがあります。

しかしながら多くの初学者にありがちなのが、感覚的に使用しているため表示にズレが生じた際にどうやって修正すれば良いのかわからず、レイアウトがぐちゃぐちゃになってしまうケース。

初学者から一歩抜け出すには、この理屈を理解する必要があると僕は思っています。

重要なのは、どの位置から50%を示しているのかということです。
top: 50%
left: 50%
というのと、
transform: translate(-50%, -50%);
というのは、どちらも同じく50%を指定していますが、どの要素を基準にしているのかは別になります。

詳しくは下記の僕のブログにて紹介しているのでぜひ参考にしてみてください。
ブログを読んでいただいた方は割引もあります。
onearc_技術ブログ

それでも分からなければお気軽にご相談くださいませ。