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씩 떨어져 있는 블록을 만드세요.