使用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>

好吧，这个更复杂，但它适用于所有浏览器，除了IE<8

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

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

:before和:after元素的位置是绝对的，因此我们可以将一个元素拉到左边，一个元素拉到右边。此外，宽度(在本例中为40%)非常依赖于内部文本的宽度。我得想个解决办法。至少在顶部:1.2em可以确保即使字体大小不同，线条也或多或少地保持在文本的中心。

它似乎工作得很好:http://jsfiddle.net/tUGrf/3/

使用Bootstrap 4预定义类

<div class="row align-items-center">
  <div class="col dropdown-divider"></div>
  <div class="col-auto">OR</div>
  <div class="col dropdown-divider"></div>
</div>

IE8及更新版本的解决方案…

值得注意的问题:

使用背景颜色来掩盖边框可能不是最好的解决方案。如果你有一个复杂的(或未知的)背景颜色(或图像)，掩蔽最终将失败。此外，如果你调整文本大小，你会注意到白色背景色(或任何你设置的颜色)会开始覆盖上面(或下面)的文本。

您也不希望“猜测”各个部分的宽度，因为这会使样式非常不灵活，几乎不可能在内容宽度不断变化的响应式站点上实现。

解决方案:

(View JSFiddle)

使用display属性，而不是用背景色“掩蔽”边框。

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

通过在.group元素上放置font-size属性来调整文本大小。

限制:

没有多行文本。只能单行。 HTML标记不那么优雅 line元素上的Top属性需要是行高的一半。所以，如果行高是1.5em，那么顶部应该是- 0.75 em。这是一个限制，因为它不是自动的，如果您在具有不同行高的元素上应用这些样式，那么您可能需要重新应用您的行高样式。

对我来说，这些限制超过了我在回答大多数实现时开头提到的“问题”。

这里有一个解决方案，只需要2个属性，很容易更新使用CSS变量:

h2 { --s: 3px; /* the thickness */ --c: red; /* the color */ --w: 100px; /* the width */ --g: 10px; /* the gap */ border: 1px solid; border-image: linear-gradient( #0000 calc(50% - var(--s)/2), var(--c) 0 calc(50% + var(--s)/2), #0000 0) 0 1/0 var(--w)/0 calc(var(--w) + var(--g)); } h2 { font-size: 2rem; margin: 20px auto; width: fit-content; } body { font-family: system-ui, sans-serif; } <h2>I am a Title</h2> <h2 style="--g:50px;--c:purple">Adding some gap </h2> <h2 style="--w:100vw;--c:blue;--s:7px">Title</h2> <h2 style="--c:green;--s:5px;--w:50px;--g:20px">Another Title</h2>

使用Flexbox的简单方法

# title-wrapper { 显示:flex; 对齐项目:中心; ｝ .title { flex-wrap:包装; Margin: 0 10px 0 10px; text-align:中心; ｝ .line { flex: 1; 身高:1 px; 背景颜色:黑色; ｝ <节id =“title-wrapper”> < div class = '行' > < / div > <div class='title'>some text</div> < div class = '行' > < / div > < / >节