在项目中遇到过中间文字，两边横线的布局，如下图：

效果图：

效果预览图

两种实现方法，具体代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title>line</title>

<style>

/*第一种方法*/

fieldset{border: none;padding: 0;border-top: 1px blue solid;text-align: center;width: 300px;margin: auto;}

legend{padding: 0 10px;font-size: 16px;color: blue;}

/*第二种方法*/

.title{color: red;text-align: center;font-size: 16px;}

.title:before,.title:after{content: "";width: 100px;border-top: 1px red solid; display: inline-block;

vertical-align: middle;}

.title:before{margin-right: 10px;}

.title:after{margin-left: 10px;}

</style>

</head>

<body bgcolor="#F2F2F2">

<!--第一种方法-->

<fieldset><legend><span>第一种方法</span></legend></fieldset>

<!--第二种方法-->

<div class="title">第二种方法</div>

</body>

</html>