How to vertically center an HR element

Question

How do I vertically center an hr element?

I've tried to place the element in some div elements...

<div class="table">
    <div class="table-cell"><hr /></div>
</div>
<div class="table">
    <div class="table-cell">Some text Here!</div>
</div>
<div class="table">
    <div class="table-cell"><hr /></div>
</div>

I've left out that I am using bootstrap and have these three div elements with the class of table in the same row using the col-size-number format.

---

So I'm looking for inline HR element Some Text inline HR element

--------------SOME TEXT--------------

Thank you again css guru masters!

Answer 1

For a simple, generic way to vertically center an hr element:

html:

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

css:

.container {
    display: flex;
    align-items: center;
}

.container hr {
    width: 100%;
}

The hr element needs a width given to it (or flex-grow), otherwise it will be only a dot in the center of the container.

.container {
  display: flex;
  align-items: center;

  height: 100px;
  background: yellow;
}

.container hr {
  flex-grow: 1;
}

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

Answer 2

To anyone who's stumbled upon this in the future, I have updated the answer to what I feel is a more modern, efficient approach using Flexbox

HTML:

<div class="title">
  <hr />
  <h3>Some text</h3>
  <hr />
</div>

CSS:

.title {
  display:flex;
  flex-flow:row;
  justify-content:center;
  align-items:center;
}
hr {
  flex:1;
}
h3 {
   padding:0px 48px;
}

DEMO HERE

Answer 3

I used the following solution in my css, margin the element to the center on every device CSS: margin: 0 auto;