使用Bootstrap 4的人可以用这种方法实现。HTML代码中提到的类来自Bootstrap 4。

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

然后像这样编写HTML

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</div>

编辑(09/2020)

显示:flex方法似乎是当今最可靠、最容易设置的方法。

写于3月17 '15 17:06:

对于后来(现在)的浏览器，display:flex和伪元素使得无需额外标记即可轻松绘制。

如果你需要花哨或难看的妆容，边框风格，盒影甚至背景也有助于化妆。 h1 {margin-top: 50 px; 显示:flex; 背景:线性渐变(向左、灰色、浅灰色,白色,黄色,绿色);; ｝ H1:前，H1:后{ 颜色:白色; 内容:”; flex: 1; 边界底部:槽2 px; 保证金:汽车0.25 em; /* ou 0 1px si border-style:ridge */ ｝ <h1>侧线通过flex</h1>

资源(2020年9月新增):

https://css-tricks.com/snippets/css/a-guide-to-flexbox/(参见这里使用的flex/flex-grow) https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ (margin:auto 0.25em;此处使用)

没有伪元素，没有附加元素。只有一个div:

为了便于控制，我使用了一些CSS变量。

div { --border-height: 2px; --border-color: #000; background: linear-gradient(var(--border-color),var(--border-color)) 0% 50%/ calc(50% - (var(--space) / 2)) var(--border-height), linear-gradient(var(--border-color),var(--border-color)) 100% 50%/ calc(50% - (var(--space) / 2)) var(--border-height); background-repeat:no-repeat; text-align:center; } <div style="--space: 100px">Title</div> <div style="--space: 50px;--border-color: red;--border-height:1px;">Title</div> <div style="--space: 150px;--border-color: green;">Longer Text</div>

但是上面的方法不是动态的。你必须根据文本长度改变——space变量。

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

为span设置padding，使文本和行之间有更多的空间。

例如:http://jsfiddle.net/tUGrf/

以防有人想这样做，依我看，使用CSS的最佳解决方案是使用flexbox。

这里有一个例子:

.kw-dvp-HorizonalButton { color: #0078d7; display:flex; flex-wrap:nowrap; align-items:center; } .kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after { background-color: #0078d7; content: ""; display: inline-block; float:left; height:1px; } .kw-dvp-HorizonalButton:before { order:1; flex-grow:1; margin-right:8px; } .kw-dvp-HorizonalButton:after { order: 3; flex-grow: 1; margin-left: 8px; } .kw-dvp-HorizonalButton * { order: 2; } <div class="kw-dvp-HorizonalButton"> <span>hello</span> </div>

这应该总是会产生一个完美的居中对齐的内容，左边和右边有一条线，线和内容之间有一个容易控制的边缘。

它在顶部控件之前和之后创建一个线元素，并在flex容器中将它们设置为顺序1,3，同时将内容设置为顺序2(进入中间)。 将前/后的值增加为1，可以使它们平等地占用最多的空白空间，同时保持内容的中心。

希望这能有所帮助!

横线和竖线，中间有字

.box{ background-image: url("https://i.stack.imgur.com/N39wV.jpg"); width: 350px; padding: 10px; } /*begin first box*/ .first{ width: 300px; height: 100px; margin: 10px; border-width: 0 2px 0 2px; border-color: red; border-style: solid; position: relative; } .first span { position: absolute; display: flex; right: 0; left: 0; align-items: center; } .first .foo{ top: -8px; } .first .bar{ bottom: -8.5px; } .first span:before{ margin-right: 15px; } .first span:after { margin-left: 15px; } .first span:before , .first span:after { content: ' '; height: 2px; background: red; display: block; width: 50%; } /*begin second box*/ .second{ width: 300px; height: 100px; margin: 10px; border-width: 2px 0 2px 0; border-color: red; border-style: solid; position: relative; } .second span { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; } .second .foo{ left: -15px; } .second .bar{ right: -15.5px; } .second span:before{ margin-bottom: 15px; } .second span:after { margin-top: 15px; } .second span:before , .second span:after { content: ' '; width: 2px; background: red; display: block; height: 50%; } <div class="box"> <div class="first"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> <br> <div class="second"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> </div>

这个问题也在https://stackoverflow.com/a/57279326/6569224得到了回答