【CSS】transformで上下左右中央寄せするとボヤける問題

こんにちは@Higemuraです!

みなさんCSSで要素を上下左右中央寄せにする場合どのように記述していますか?

僕はほとんどtransformpositionで実装してしまうのですが、最近問題が発生してしまいました。。。

それはボタンをクリックしたらコンテンツが画面上下左右中央寄せになるモーダルウィンドウを実装したときのことです。

モーダルウィンドウ内のコンテンツのテキストや画像などがボヤけて表示されてしまうバグが発生しました。

僕の環境で確認したところWindowsのChromeブラウザで発生してしまいました。

なぜボヤけるのか?

transformの描画の仕方に癖がある。

モーダルウィンドウを上下左右中央寄せにする際に便利なのがtransformpositionを利用したパターンです。

親要素(.parent)に position: relative;を設定し、小要素(.child)に position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); を設定することで簡単にコンテンツが上下左右中央寄せになります。

仕組みとしては、小要素(.child)が親要素(.parent)を基準とし、上左方向から position: absolute; で50%ずらします。

そのあと transform: translate; でずらした場所から-50%位置を戻すことで上下左右中央寄せになります。

しかし、デメリットとしてtransformで描画したコンテンツはレンダリング方法が異なり、小数点pxが発生し条件によってはボヤけてしまうことがあります。。
一部のブラウザやOSの種類によってこのようなバグが発生してしまう場合があります。

transformposition を利用した上下左右中央寄せは以下の通りに実装することができます↓

例:transformとpositionで実装

  • STEP.1
    HTML

     

  • STEP.2
    CSS

     

  • STEP.3
    動作デモ

    See the Pen wxeJdG by Higemura (@Higemura) on CodePen.0

メリット

transformとpositionで実装するメリットはモーダルウィンドウのコンテンツ(.child部分)の高さが可変にできるところです。

heightなどを指定せずとも、コンテンツの中身の量によって自動的に高さが保持されます。

一部の環境もしくはブラウザでしかボヤけないので、あまり気にならない方はこちらの実装の方が簡単かもしれません。

どんな環境下でもボヤけないようにしたい場合

あまり、メリットはありませんがpositionのみで上下左右中央寄せして、max-height を指定することで「ボヤける」現象を完全になくすことができます。

例:positionのみで実装

  • STEP.1
    HTML
  • STEP.2
    CSS
  • STEP.3
    動作デモ

    See the Pen Modal Window. Position Only by Higemura (@Higemura) on CodePen.0

この方法は top left right bottomの値を全て0にして margin: auto にすることにより子要素(.child)が上下左右中央寄せになる手法です。

しかし、子要素(.child)の高さを指定をしないと画面いっぱいに伸びてしまうため max-height で高さを指定しています。

max-heightは高さの最大値なので画面の高さが150px以下になった場合は可変するようになっています。

まとめ

transformプロパティで「ボヤけ」てしまう現象はごく一部の環境&ブラウザなので僕はあまり気にしていませんが、気になる場合は positionのみで実装してみましょう。

ただし、positionのみの上下左右中央寄せはコンテンツの高さが可変にできないので max-heightoverflow: scroll; などで調整してみるといいかもしれません。

この記事には記述していませんがFlexboxを使用して簡単に「上下左右中央寄せ」ができますが、IE8,9などがデフォルトで使用できないので、モダンブラウザのみ対応している方はFlexboxを使うと良いでしょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です