采用@kajic的解决方案，并将样式放在CSS中:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

然后CSS(但这取决于CSS3在使用第n个选择器):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

欢呼。

(注:在tbody和tr上，Chrome, IE和Firefox至少会自动插入tbody和tr，这就是为什么我的例子，像@kajic的例子，没有包括这些，以便在所需的html标记中保持内容简短。该解决方案在2013年最新版本的IE、Chrome和Firefox上进行了测试)。

采用@kajic的解决方案，并将样式放在CSS中:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

然后CSS(但这取决于CSS3在使用第n个选择器):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

欢呼。

(注:在tbody和tr上，Chrome, IE和Firefox至少会自动插入tbody和tr，这就是为什么我的例子，像@kajic的例子，没有包括这些，以便在所需的html标记中保持内容简短。该解决方案在2013年最新版本的IE、Chrome和Firefox上进行了测试)。

请尝试使用bootstrap:

<div class="text-center d-flex">
  <hr className="flex-grow-1" />
  <span className="px-2 font-weight-lighter small align-self-center">
    Hello
  </span>
  <hr className="flex-grow-1" />
</div>

这是结果

哇，我的第一个帖子，尽管这是一年以前。为了避免包装器的背景着色问题，可以在hr中使用内联块(没有人明确地说过)。文本对齐应该正确居中，因为它们是内联元素。

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

总是有很好的FIELDSET

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

如果你可以使用CSS并且愿意使用已弃用的align属性，那么一个有样式的fieldset/legend将会工作:

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

字段集的预期目的是对表单字段进行逻辑分组。正如willoler所指出的，text-align: center样式的for将不适用于图例元素。align="center"是已弃用的HTML，但它应该在所有浏览器中正确地居中文本。