Centrering via absolut i CSS

Det finns ett knepigt sätt att centrera ett element via absolut positionering. Man kan göra så att elementet placeras exakt i mitten av webbläsarens fönster. För att göra detta behöver man inte ange dimensioner för elementet och samtidigt sätta positionering från alla fyra sidor:

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

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

Результат:

Задание 1

Med hjälp av det beskrivna sättet, skapa ett block som ligger i mitten av skärmen och har ett avstånd på alla sidor om 100px.

Задание 2

Med hjälp av det beskrivna sättet, skapa ett block som har ett avstånd på 100px från skärmens överkant, 200px från högerkanten, 50px från underkanten och 10px från vänsterkanten.