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

对于垂直居中元素的简单通用方法hr：

html:

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

CSS：

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

.container hr {
    width: 100%;
}

该hr元素需要width给定它（或flex-grow），否则它将只是容器中心的一个点。

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

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

.container hr {
    width: 100%;
}

Answer 2

对于将来偶然发现这一点的任何人，我已经将答案更新为我认为更现代、更有效的方法，使用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;
}

演示在这里