你可以用:before和:after来实现这一点，而不需要知道容器的宽度或背景颜色，使用它们可以使换行符具有更大的样式。例如，这可以修改为双线、虚线等。

JSFiddle

CSS和HTML用法:

.hr-sect { 显示:flex; flex-basis: 100%; 对齐项目:中心; 颜色:rgba(0,0,0,0.35); Margin: 8px 0px; ｝ .hr-sect:之前, .hr-sect:{后 内容:“”; flex-grow: 1; 背景:rgba(0,0,0,0.35); 身高:1 px; 字体大小:0 px; 行高:0 px; Margin: 0px 8px; ｝ < div class = " hr-sect”>类别< / div >

SCSS版本:

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;

    &:before, &:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin: 0 8px;
    }
}

与Bootstrap 4，这似乎是为我工作:

<div class=“row”> <div class=“col”><hr/></div> <div class=“col-auto”>Or</div> <div class=“col”><hr/></div> </div>

html

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

css

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}

演示页面

HTML

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

试试这个:

.divider { 宽度:500 px; text-align:中心; ｝ .divider hr { margin-left:汽车; margin-right:汽车; 宽度:40%; ｝ .left { 浮:左; ｝ 铃声{ 浮:正确; ｝ < div class = "分" > <hr class="left"/>TEXT<hr class="right" /> < / div >

实时预览jsFiddle。

如果你可以使用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，但它应该在所有浏览器中正确地居中文本。