新年明けましておめでとうございます。
この記事を書いているのは2024年1月4日。年明けて最初のお仕事の日です。
去年は自分の仕事に関して、少しだけ新しい事にチャレンジすることができ、フロントエンジニアとして独立して10年間一度も経験したことのなかった営業活動をして、無事成果に繋げることができた一年でした。
そんなこんなで今年はより新しいことにチャレンジしながら、エンジニアとしてだけではなく、個人事業主から経営者になれるようにマインドも変化していきたいと思います。
早速本題（要素を中心に配置する方法）
ここからは本題に入ります。
今回の記事では特定の要素（ロゴや画像など）を縦横の中心に配置する方法を２パターンご紹介します。
（備忘録というほどの内容ではありませんが、HTML/CSS初学者のための内容として記録します。）
初学者にとっては要素を高さ方向に中央揃えするというのは割とハードルが高いと思いますが、実務では結構使う場面が多く、実装方法もいくつかパターンがあります。
どの方法をつかって実装するかはアニメーションの有無などによっても異なってきますが、３つ目に紹介する「display: table-cell」を使った実装はお勧めしません。（一昔前はtable組みが多かった時代もあると思いますが、今はflex-boxで組んだ方が圧倒的に楽でレスポンシブ対応もしやすいです）
「display: flex-box;」を使う方法
特に複雑なアニメーションを必要としない場合、個人的に最も多用するのがこの方法です。flex-boxは中央に配置する以外にも、要素を横に並べたりグリッド状に並べるなど、今のコーディングには欠かせないものなので初学者の方は必ず覚えておきましょう。
flex-boxは使い方やアイディア次第で、かなり柔軟なレスポンシブデザインを実装することができ、中央配置をするときにもかなり使いやすいです。
HTML/CSS共にシンプルな記述で実装することができるので、基本的にはこの方法での実装をすることをお勧めします。
コードの解説をちょっとだけすると、flex-boxを指定する要素の横幅と高さを指定し、「align-items: center;」で高さ方向の中央揃え、「justify-contents: center;」で横方向の中央揃えを指定しています。
今回のような記述だと.logoの要素が複数になった場合でも、均等に配置されたまま中央揃えに表示することができるので、要素が複数ある時や動的に変更される場合でも柔軟に対応することができます。
「position: absolute;」を使う方法
少し複雑なアニメーションを実装するなど、flex-boxの実装では不都合が出るような場合には「position: absolute;」を使って要素を中央に配置することがあります。
position:absoluteを使って中央に配置すると、flex-boxに比べてアニメーションで動かしやすい場合があります。
また、flex-boxを使う場合はmarginなどを使ってアニメーション実装しなくてはいけない場合などもあり、アニメーションがカクツク原因になることもあるので、なんだかアニメーションがスムーズにならない。という時はこちらの方法で試してみるのもいいと思います。
実装のポイントとしては、.logoの要素のサイズを後から変更しても表示が崩れないように、top,leftを共に50%に指定し、transform:translate(-50%,-50%)を指定していることです。
これにより、親要素（.wrapper）の中心に子要素（.logo）の左上が配置され、そこから子要素の横幅と高さの50%ずつマイナス方向に動くので、親要素、子要素のサイズに依存せずに常に中心に配置することができます。
注意点として、flex-boxの時とは異なり、要素を複数にする場合は個別に位置の調整が必要になるので、動的に要素の数が変わるような場合にはこの実装は不向きです。
「display: table-cell」を使う方法
最後に昔ながらの実装方法もご紹介しておきます。
今はほとんど使うことがなくなりましたが、flex-boxなどが使えるようになるまでは高さ方向の中央揃えにはtableを使って実装することがありました。
いまだに古いサイトなどではHTMLの構造がtableになっているものもあり、SEO的にもユーザービリティ的にもよろしくないものもあります。
もしどうしてもtableタグのようにして位置調整をしたい場合は、tableタグを使うのではなくcssのdisplayプロパティにtable、table-cellを指定することで、tableタグを使った時と同じような挙動をさせることができます。
通常のtableタグを使うのと同じように、tableとtable-cellの二つが親子関係になっている必要があるので注意しましょう。（親要素にdisplay:table; 子要素にdisplay:table-cell;）
表を作成する場合は素直にtableタグを使えばOKですが、表ではないけど表のように使いたい場合に重宝してきた方法です。
PC表示だけを考えればflex-boxをほとんど遜色ないように思えますが、tableとして挙動するので画面サイズに合わせた縮小や改行が難しく、現在のような多種多様な画面サイズに対応する必要がある状況ではほとんど使うことはありません。
（flex-boxの方が圧倒的にレスポンシブデザインに適しています）
アニメーションがかくつく時の対処法
途中で少し触れましたが、上記の方法で中央に配置した場合、ホバー効果などでアニメーションをつけるとカクツク時があります。
ブラウザや端末の性能に依存する場合もありますが、どうしても解決するのが難しい場合には他の実装方法で試してみるといいかもしれません。
HTML/CSSに限らず、同じものを実装する場合でも複数の方法が考えられます。最初の頃はなかなか複数の実装を思いつくのが難しいかもしれませんが、今回のようにいくつかの方法を知っておくことで、アニメーションなどの実装に合わせてうまく対応することができます。
will-changeプロパティを最初に確認
CSSアニメーションがカクツクとき、最初に確認するべきは「will-change」プロパティの設定です。
「will-change」は「will-change: top;」のように、アニメーションを実行するプロパティを指定することで、ブラウザにあらかじめ「top」の値が変更されるということを伝えることができます。
複数のプロパティを指定する場合は「will-change: top, opacity」のようにカンマで区切ることで複数指定することができます。
これによりカクツキを抑えて滑らかなアニメーションを実装することができます。（解決できない場合もあります。）
0.5pxなど1px以下のアニメーションになる場合、カクツキが起きやすくなるので試してみるといいですね。
「transform: translate3d(0,0,0);」は使わない方がよさそう
アニメーションを滑らかにするときに、ググるとよく出てくるのが「transform: translate3d(0,0,0);」を指定することでGPUによる高速処理をさせる・・・。というものがあります。
が、この処理はwill-changeのように特定のプロパティを指定するわけではないので、複数のアニメーションを同時に実行するような環境だと、処理が遅くなる可能性があります。
基本的にはwill-changeでプロパティ指定をするようにして、できる限り「transform: translate3d(0,0,0);」は使わない方が、多くのユーザーにとっての体験を損なわないですみそうですね。
まとめ
HTML/CSSは覚えるのも比較的簡単で、一度覚えてしまえばそこまで追加学習の必要はありませんが、今でもモダンブラウザに対応するために新しい機能などが追加されています。
初学者の方はなるべく最新の情報で学習をすると思いますが、実務では古い記述に出会うこともあるので昔の書き方なども少し触れておくといいかもしれません。
また、すでに実務で活動されている方も、最新の情報はしっかりと追いましょう！（自分への戒めも含めて・・・笑）