CSSで要素を上下左右中央寄せにする場合どのように記述していますか？
僕はほとんど transform と position で実装してしまうのですが、最近問題が発生してしまいました。。。
それはボタンをクリックしたらコンテンツが 画面上下左右中央寄せになるモーダルウィンドウ を実装したときのことです。
WindowsのChromeブラウザでモーダルウィンドウ内のコンテンツのテキストや画像などがボヤけて表示されてしまうバグが発生しました。
なぜボヤけるのか?
transformの描画の仕方に癖がある。
モーダルウィンドウを上下左右中央寄せにする際に便利なのがtransformとpositionを利用したパターンです。
親要素（.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の種類によってこのようなバグが発生してしまう場合があります。
transformとposition を利用した上下左右中央寄せは以下の通りに実装することができます↓
例：transformとpositionで実装
HTML
<div class="parent">
<div class="child">
<h2>コンテンツタイトル</h2>
<p>コンテンツテキスト</p>
</div>
</div>
CSS
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: auto;
}
動作デモ
---メリット
transformとpositionで実装するメリットはモーダルウィンドウのコンテンツ（.child部分）の高さが可変にできるところです。
heightなどを指定せずとも、コンテンツの中身の量によって自動的に高さが保持されます。
一部の環境もしくはブラウザでしかボヤけないので、あまり気にならない方はこちらの実装の方が簡単かもしれません。
どんな環境下でもボヤけないようにしたい場合
あまり、メリットはありませんがpositionのみで上下左右中央寄せして、max-height を指定することで「ボヤける」現象を完全になくすことができます。
例：positionのみで実装
HTML
<div class="parent">
<div class="child">
<h2>コンテンツタイトル</h2>
<p>コンテンツテキスト</p>
</div>
</div>
CSS
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 250px;
height: auto;
max-height: 150px;
background-color: #ffffff;
}
動作デモ
---この方法は top left right bottomの値を全て0にして margin: auto にすることにより子要素（.child）が上下左右中央寄せになる手法です。
しかし、子要素（.child）の高さを指定をしないと画面いっぱいに伸びてしまうため max-height で高さを指定しています。
max-heightは高さの最大値なので画面の高さが150px以下になった場合は可変するようになっています。
まとめ
transformプロパティで「ボヤけ」てしまう現象はごく一部の環境&ブラウザなので僕はあまり気にしていませんが、気になる場合は positionのみで実装してみましょう。
ただし、positionのみの上下左右中央寄せはコンテンツの高さが可変にできないので max-height や overflow: scroll; などで調整してみるといいかもしれません。
この記事には記述していませんがFlexboxを使用して簡単に「上下左右中央寄せ」ができますが、IE8,9などがデフォルトで使用できないので、モダンブラウザのみ対応している方はFlexboxを使うと良いでしょう！