我一直在寻找这个简单的装饰的一些解决方案，我发现了相当多的，一些奇怪的，一些甚至用JS来计算字体的高度和bla,bla,bla，然后我读了这篇文章，读了一个评论从thirtydot谈到fieldset和传说，我认为这就是它。

我重写了这2个元素样式，我猜你可以复制它们的W3C标准，并将其包含在你的.middle-line-text类(或任何你想叫它的)中，但这是我所做的:

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

这是小提琴:http://jsfiddle.net/legnaleama/3t7wjpa2/

我玩了边界样式，它也可以在Android;)(在kitkat 4.XX上测试)

编辑:

遵循Bekerov Artur的想法，这也是一个不错的选择，我已经改变了。png base64图像创建一个。svg的笔画，这样你就可以在任何分辨率渲染，也可以改变元素的颜色，而不需要任何其他软件的参与:)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

这段代码将正常工作:

/* پخش زنده*/ .div-live { text-align:中心; ｝ .span-live { 显示:inline-block; 颜色:# b5b5b5; ｝ .span-live:之前, .span-live:{后 Border-top: 1px solid #b5b5b5; 显示:块; 身高:1 px; 内容:“”; 宽度:30%; 位置:绝对的; 左:0; 上图:3快速眼动; ｝ .span-live:{后 右:0; 左:汽车; ｝ < div class = " div-live”> <span class="span-live">پخش زنده</span> < / div >

我选择了一个更简单的方法:

HTML

<div class="box">
  <h1 class="text">OK THEN LETS GO</h1>
  <hr class="line" />
</div>

CSS

.box {
  align-items: center;
  background: #ff7777;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.line {
  border: 5px solid white;
  display: block;
  width: 100vw;
}

.text {
  background: #ff7777;
  color: white;
  font-family: sans-serif;
  font-size: 2.5rem;
  padding: 25px 50px;
  position: absolute;
}

结果

下面是我对Bootstrap 5的简单解决方案，只使用预定义的类:

<div class="py-3 d-flex align-items-center">
    <hr class="flex-grow-1" />
    <div class="badge bg-secondary">OR</div>
    <hr class="flex-grow-1" />
</div>

结果:

你可以将它作为React组件重用，例如:

export default function Divider({ text }) {
    return <div className="py-3 d-flex align-items-center">
        <hr className="flex-grow-1" />
        <div className="badge bg-secondary">{ text }</div>
        <hr className="flex-grow-1" />
    </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/

在尝试了不同的解决方案后，我有一个有效的不同的文本宽度，任何可能的背景，没有添加额外的标记。

h1 { 溢出:隐藏; text-align:中心; ｝ h1:之前, h1:{后 background - color: # 000; 内容:“”; 显示:inline-block; 身高:1 px; 位置:相对; vertical-align:中间; 宽度:50%; ｝ h1:{之前 右:0.5 em; margin-left: -50%; ｝ h1:{后 左:0.5 em; margin-right: -50%; ｝ <标题>标题< / h1 > <h1>这是一个较长的标题</h1>

我在IE8、IE9、Firefox和Chrome浏览器上进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/