2018/07/25ツイートシェアはてブGoogle+PocketLINEこんにちは@Higemuraです!みなさんCSSで要素を上下左右中央寄せにする場合どのように記述していますか?僕はほとんどtransformとpositionで実装してしまうのですが、最近問題が発生してしまいました。なるモーダルウィンドウを実装したときのことです。モーダルウィンドウ内のコンテンツのテキストや画像などがボヤけて表示されてしまうバグが発生しました。僕の環境で確認したところWindowsのChromeブラウザで発生してしまいました。目次なぜボヤけるのか?メリットどんな環境下でもボヤけないようにしたい場合まとめなぜボヤけるのか?transformの描画の仕方に癖がある。モーダルウィンドウを上下左右中央寄せにする際に便利なのがtransformとpositionを利用したパターンです。設定することで簡単にコンテンツが上下左右中央寄せになります。ずらした場所から-50%位置を戻すことで上下左右中央寄せになります。デメリットとしてtransformで描画したコンテンツはレンダリング方法が異なり、小数点pxが発生し条件によってはボヤけてしまうことがあります。一部のブラウザやOSの種類によってこのようなバグが発生してしまう場合があります。CodePen.0メリットtransformとpositionで実装するメリットはモーダルウィンドウのコンテンツ(.child部分)の高さが可変にできるところです。heightなどを指定せずとも、コンテンツの中身の量によって自動的に高さが保持されます。一部の環境もしくはブラウザでしかボヤけないので、あまり気にならない方はこちらの実装の方が簡単かもしれません。指定することで「ボヤける」現象を完全になくすことができます。することにより子要素(.child)が上下左右中央寄せになる手法です。高さを指定しています。max-heightは高さの最大値なので画面の高さが150px以下になった場合は可変するようになっています。positionのみで実装してみましょう。調整してみるといいかもしれません。:CSSHTMLこの記事を書いた人Higemura高卒フロントエンジニア高校卒業後にHTMLやCSSなどから独学で勉強していき、高卒FE(フロントエンジニア)として都内でフリーランスで活動中。高卒でもWebエンジニアとして活躍できることを証明する為、初心者でもわかりやすいWeb制作ノウハウを発信しています。コメントをキャンセルメールアドレスが公開されることはありません。目次なぜボヤけるのか?メリットどんな環境下でもボヤけないようにしたい場合まとめサイト管理人Higemura高卒FE(フロントエンジニア)独学でWeb制作を勉強してフリーランスで活動しています。柴犬2匹飼っておりワンコについても呟いてます。