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

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

我使用一个表格布局来动态填充边和0高度，绝对位置div动态垂直定位:

没有硬编码的维度 没有图像 没有它 方面的背景 控制条外观

https://jsfiddle.net/eq5gz5xL/18/

我发现，稍微低于真中心的文字效果最好;这可以在55%的位置进行调整(身高越高，界限越低)。线条的外观可以改变边界底部的位置。

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

这大概就是我要做的:通过设置包含h2的border-bottom来创建行，然后给h2一个较小的行高。然后将文本放在具有非透明背景的嵌套span中。

h2 { 宽度:100%; text-align:中心; Border-bottom: 1px实心#000; 行高:0.1 em; Margin: 10px 0 20px; ｝ H2跨度{ 背景:# fff; 填充:0 10 px; ｝ <h2><span>THIS IS A TEST</span></h2> <p>这是一些其他的内容</p>

我只在Chrome上进行了测试，但没有理由它不能在其他浏览器上运行。

JSFiddle: http://jsfiddle.net/7jGHS/

h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

这对你有帮助

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

好吧，这个更复杂，但它适用于所有浏览器，除了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/