Controlling Space

To move elements we use top, right, bottom, left. But there are also advanced techniques.

1. Stretching via 0-0-0-0

If you set top: 0; right: 0; bottom: 0; left: 0; to an absolute block, it will stretch to the full size of its parent. This is the classic way to make a semi-transparent background or overlay.

2. Modern Property: inset

Instead of writing 4 lines, use the inset shorthand.

.overlay {
  position: absolute;
  inset: 10px 20px; /* Top/bottom 10px, left/right 20px */
}

3. Centering via Coordinates and Transform

.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* Perfect center */
}