Căn giữa qua absolute trong CSS

Tồn tại một cách thông minh để căn giữa phần tử thông qua định vị tuyệt đối. Có thể làm sao cho phần tử sẽ được đặt chính xác ở trung tâm cửa sổ trình duyệt. Để làm điều này cần không chỉ định kích thước cho phần tử và đồng thời thiết lập định vị từ cả bốn phía:

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

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

Результат:

Задание 1

Sử dụng cách đã mô tả, hãy tạo một khối, nằm ở giữa màn hình và có khoảng lùi từ tất cả các phía là 100px.

Задание 2

Sử dụng cách đã mô tả, hãy tạo một khối, có khoảng lùi từ phía trên mép màn hình là 100px, từ phải - 200px, từ dưới - 50px, còn từ trái - 10px.