Horizontal line in the middle of the page

Question

I want to have a horizontal line in the middle of the page. Some thing like

<div class="line">
  <hr>
</div>

.line {
  top: 50%;
}

But this doesn't work. I don't want to write the line by myself like

<p> _______________________________________</p>

Is there some way to center the hr?

Answer 1

You need the line to be taken out of the normal flow of the document before you can set the top property. Try this

.line {
   position:absolute;
   width:100%;
   top: 50%;
}

<hr class="line">

JS Fiddle: https://jsfiddle.net/q9o5q70z/

Answer 2

Use the <hr> tag, it's what it's for.