2021/11/07

HTMLを書く時に要素の中央寄せをしたいとなった時には色々な方法があると思いますが、画面の中央に何が来るかは要素の長さに依存して、自分では決められないことが多い気がしました。

そこで要素の中心ではなく、指定した箇所を画面の中央に置く方法を考えることにしました。

方法としては、文章を左・右・中央の３つの要素に分けて、中央に置きたい要素のみを中央寄せした後、中央にした要素の左右にある要素の位置をJSで調整するようにしてみました。

ポイントとしては、各要素に transform: translateX(-50%); を入れることで、位置の計算をやりやすくしています。

CSSだけでいい感じにできる方法があれば良かったのですが、軽く探した限りでは無さそうだったので力技みたいな実装になりました。