如果你可以使用CSS并且愿意使用已弃用的align属性，那么一个有样式的fieldset/legend将会工作:

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

字段集的预期目的是对表单字段进行逻辑分组。正如willoler所指出的，text-align: center样式的for将不适用于图例元素。align="center"是已弃用的HTML，但它应该在所有浏览器中正确地居中文本。

这是一个2年前的帖子，但这里是我如何使用一个元素和CSS来处理这些情况。

​h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

这里有一个小提琴来检查:http://jsfiddle.net/sRhBc/(随机图像从谷歌采取的边界)。

这种方法的唯一缺点是它不支持IE7。

更新:这将不工作使用HTML5

相反，请查看这个问题以获得更多技术:CSS挑战，我可以在不引入更多HTML的情况下做到这一点吗?

我使用line-height:0在我的网站guerilla-alumnus.com的标题中创建效果

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

另一个好方法是http://robots.thoughtbot.com/

他使用背景图像和浮动来达到一种很酷的效果

这里有一个简单的解决方案，只有css，没有背景技巧…

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

HTML:

  <div class="center-separator">
    centered text
  </div>

示例小提琴:https://jsfiddle.net/0Lkj6wd3/

Flexbox和SCSS

HTML

<div class="divider">divider</div>

SCSS

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #c2c2c2;

    &::before,
    &::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #c2c2c2;
    }
    &::before {
        margin-right: 0.25em;
    }
    &::after {
        margin-left: 0.25em;
    }
}

看上面，我修改为:

CSS

.divider {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align:center;
    text-transform: uppercase;
}
.divider span {
    position:relative;
}
.divider span:before, .divider span:after {
    border-top: 2px solid #000;
    content:"";
    position: absolute;
    top: 15px;
    right: 10em;
    bottom: 0;
    width: 80%;
}
.divider span:after {
    position: absolute;
    top: 15px;
    left:10em;
    right:0;
    bottom: 0;
}

HTML

<div class="divider">
    <span>This is your title</span></div>

似乎工作得很好。