CSSにおける絶対配置による中央揃え

絶対位置指定を用いて要素を中央に配置する巧妙な方法があります。要素をブラウザウィンドウのちょうど中央に配置することができます。そのためには、要素のサイズを指定せず、かつ上下左右の四辺からの位置を指定します：

html<div id="elem"></div>

css#elem {
  position: absolute;
  top:    30px;
  right:  30px;
  bottom: 30px;
  left:   30px;
  
  border: 1px solid green;
}

Результат:

Задание 1

説明した方法を使って、画面中央に配置され、全ての辺から 100px 離れたブロックを作成してください。

Задание 2

説明した方法を使って、画面の上端から 100px、右端から 200px、下端から 50px、左端から 10px 離れたブロックを作成してください。