要素を真ん中に置く方法

こんばんは。

要素を真ん中に配置したいなーってときのメモ

よく使うのが

margin:0 auto;

とか

text-align: center;

とかとか？

margin:0 auto;は横幅決めたブロックの配置に使うもので、

text-alignはインラインの内容の配置に使うってイメージです。

合ってますかね。。

今回のはちょっと違うやり方です。

どんな解像度の画面にも合う方法？みたいです。

考えたら簡単な話なのですが、

２回も聞いてしまったのでもう聞かないようにメモって置きます。

書き方はこんな感じです。

// 要素の大きさ指定
display: block;
width: 300px;
height: 200px;
// 絶対位置で、要素のスタート位置を真ん中に
position: absolute;
top: 50%;
left: 50%;
// 要素の大きさの半分をマイナスマージン
margin-top: -150px;
margin-left: -100px;