Centralização através de absolute em CSS

Existe uma maneira inteligente de centralizar um elemento através do posicionamento absoluto. É possível fazer com que o elemento seja posicionado exatamente no centro da janela do navegador. Para isso, não é necessário definir as dimensões do elemento, mas sim definir o posicionamento pelos quatro lados:

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

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

Результат:

Задание 1

Usando o método descrito, crie um bloco que fique no centro da tela e com margem de 100px em todos os lados.

Задание 2

Usando o método descrito, crie um bloco com margem de 100px a partir da borda superior da tela, 200px à direita, 50px na parte inferior, e 10px à esquerda.