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

How do I put a vertical line down the middle of a div? Maybe I should put two divs inside the div and put a left border on one and a right border on the other? I have a DIV tag and I need to put one ascx on the left (that will get swapped out from time to time with another ascx) and then a static ascx on the left. Any ideas on how I should do this? Maybe I answered my own question.

Any pointers would be great

Solution 1:

Maybe this can help you

.here:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #ff0000;
    transform: translate(-50%);
}

div {
    margin: 10px auto;
    width: 60%;
    height: 100px;
    border: 1px solid #333;
    position:relative;
    text-align:center
}

<div class="here">Content</div>

Here's is a JSFiddle demo.

Solution 2:

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

linear-gradient(#000, #000) this creates a background-image so we can later use background-size to contain it.
no-repeat this stops the gradient from repeating when we do put background-size on it.
center - this is the background-position this is where we put the "diving line"
/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;