How can I put a vertical line down the center of a div?

Although this question was asked 9yrs ago and a lot of the answers would “work”. CSS has evolved and you can now do it in a single line without using calc.

One liner (2018) answer:

background: linear-gradient(#000, #000) no-repeat center/2px 100%;

How this works

1. linear-gradient(#000, #000) this creates a background-image so we can later use background-size to contain it.
2. no-repeat this stops the gradient from repeating when we do put background-size on it.
3. center – this is the background-position this is where we put the “diving line”
4. /2px 100% – this is making the image 2px wide and 100% of the element you put it in.

This is the extended version:

  background-image: linear-gradient(#000, #000);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center center;