我认为最直接的方法是使用CSS网格。

h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; ｝ h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; ｝ <标题>标题< h2 >

<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/

这是一个基于Flex的解决方案。

h1 { 显示:flex; flex-direction:行; ｝ h1:之前,h1:{后 内容:“”; Flex: 11; Border-bottom: 1px solid; 保证金:汽车; ｝ h1:{之前 margin-right: 10 px ｝ h1:{后 margin-left: 10 px ｝ 今天< h1 > < / h1 >

JSFiddle: https://jsfiddle.net/j0y7uaqL/

我已经尝试了大多数建议的方法，但结束了一些问题，如全宽度，或不适合动态内容。最后我修改了一个代码，并完美地工作。这个示例代码将在之前和之后绘制这些线条，并且在内容更改方面非常灵活。中心对齐。

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

结果: https://jsfiddle.net/fasilkk/vowqfnb9/

我一直在寻找这个简单的装饰的一些解决方案，我发现了相当多的，一些奇怪的，一些甚至用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;
}

我不太确定，但您可以尝试使用水平规则，并将文本推到其上边距之上。你还需要一个固定宽度的段落标签和背景。这有点粗糙，我不知道它是否适用于所有浏览器，你需要根据字体大小设置负边距。虽然chrome的工作。

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>