◆ 固定サイズ(px) → left,topを50%にしてwidth,heightで幅と高さを指定 その半分の値をマイナスmargin指定

◆ 可変サイズ(%) → left,right,top,bottomに中央部分を残したパーセントを指定
　 幅50% 高さ40%のブロック→left:25%;right:25%;top:30%;bottom:30%; 

◆ flexbox使えるならそっちを使う 
あるブロック要素を真ん中に置きたい時の方法です
alert()のダイアログみたいなのを自分で作るときやjQueryによくあるモーダルウィンドウをつくるときに真ん中に配置したいですよね

しかし真ん中に配置ってなかなか大変です
最近のブラウザはflex-box使えてお手軽ですが まだ仕様確定じゃないそうですし全ブラウザ対応を考えると他の方法を使いたいものです
（昔の指定方法がdisplay:boxだったのが今display:flexになってるくらいです）

固定サイズのとき

width:100px みたいに%じゃなくてpxなどで指定する固定サイズのときの方法です

親
position: relative;
子
position: absolute; left: 50%; top: 50%; width: 200px; height: 100px; margin -100px -50px;

absoluteにしてleftとtopを50%にして子エレメントの左上の点を親エレメントの中心にします
そして marginにマイナス方向にエレメントのサイズの半分を指定します
これで子エレメントの中心が親エレメントの中心にくるので真ん中に配置できます

この例の widthとheightを変えて それぞれの半分をmarginに指定するだけで好きなサイズに変更できます！

可変サイズのとき

親エレメントの80%とかパーセント指定するときは marginのパーセントが別の意味になるのでさっきの方法は使えません

親
position: relative;
子
position: absolute; left: 20%; top: 30%; right: 20%; bottom:30%;

こっちのほうが指定が簡単です
left、right、top、bottomの4つに%で指定します
指定する値は子エレメントのサイズを残した外側の大きさです
今回のサンプルだと薄いオレンジ色のところです

子エレメントにwidth:60%を指定したいときは 残りの40%を半分にしてleftとrightの両方に20%を指定します
左右と上下で異なる値を設定すると真ん中に来ないでずれます